在左侧标签，而不是在input字段上方

我想标签不在input栏上方，而是在左侧。

<form method="post" action="" role="form" class="form-inline"> <div class="form-group"> <label for="rg-from">Ab: </label> <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> </div> <div class="form-group"> <label for="rg-to">Bis: </label> <input type="text" id="rg-to" name="rg-to" value="" class="form-control"> </div> <div class="form-group"> <input type="button" value="Clear" class="btn btn-default btn-clear"> <input type="submit" value="Los!" class="btn btn-primary"> </div> </form> 

这段代码给了我：

我想拥有：

Answer 1

将<label>放在form-group ：

 <form class="form-inline"> <label for="rg-from">Ab: </label> <div class="form-group"> <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> </div> <!-- rest of form --> </form> 

Answer 2

您可以使用form-inline类为每个窗体组:)

 <form> <div class="form-group form-inline"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </form> 

Answer 3

Bootstrap 3文档在标签为“需要自定义宽度”部分的CSS文档选项卡中介绍了这一点，该部分指出：

在Bootstrap中，默认情况下，input，select和textareas都是100％的宽度。 要使用内联表单，您必须在内部使用的表单控件上设置宽度。

如果您使用浏览器和Firebug或Chrome工具来抑制或减less“宽度”风格，您应该看到事情按照您想要的方式排列。 很明显，你可以创build合适的CSS来解决这个问题。

不过，我觉得很奇怪，我需要这样做。 我不禁感到这种操纵既烦人又长期，容易出错。 最终，我使用了一个虚拟类和一些JS来全局填充我所有的内联input。 案件数量不多，所以没什么太大关系。

尽pipe如此，我也很乐意听到一个有“正确”解决scheme的人的意见，并可以消除我的sh /。

希望这会有所帮助，并且支持你们不要把那些忽略了你的请求的人放在垫子上作为Bootstrap 3的关注点。

Answer 4

喜欢这个

DEMO

HTML

 <div class="row"> <form class="form-inline"> <fieldset> <label class="control-label"><strong>AB :</strong></label> <input type="text" class="input-mini" > <label class="control-label"><strong>BIS:</strong></label> <input type="text" class="input-mini" > <input type="button" value="Clear" class="btn btn-default btn-clear"> <input type="submit" value="Los!" class="btn btn-primary"> </fieldset> </form> </div> 

Answer 5

您可以使用两种方法在标签和表单控件的边创build这样的表单 –

1.内联表单布局

 <form class="form-inline" role="form"> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> <div class="form-group"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> <button type="reset" class="btn btn-default">Reset</button> <button type="submit" class="btn btn-primary">Login</button> </form> 

2.水平布局

 <form class="form-horizontal"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label for="inputEmail" class="control-label col-xs-3">Email</label> <div class="col-xs-9"> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> </div> <div class="col-sm-5"> <div class="form-group"> <label for="inputPassword" class="control-label col-xs-3">Password</label> <div class="col-xs-9"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </div> <div class="col-sm-3"> <button type="reset" class="btn btn-default">Reset</button> <button type="submit" class="btn btn-primary">Login</button> </div> </div> </form> 

你可以看看这个页面的更多信息和现场演示 – http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Answer 6

我有同样的问题，这里是我的解决scheme：

 <form method="post" class="form-inline form-horizontal" role="form"> <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label> <div class="input-group col-sm-7"> <input class="form-control" type="email" name="email" placeholder="[e-mail]"/> <span class="input-group-btn"> <button class="btn btn-primary" type="submit">Submit</button> </span> </div> </form> 

这里是演示

Answer 7

你必须像这样浮动所有的元素：

 .form-group, .form-group label, .form-group input { float:left; display:inline; } 

给预期的要素留有余地：

  .form-group { margin-right:5px } 

并将标签设置为与字段高度相同的线高度：

 .form-group label { line-height:--px; } 

Answer 8

从现有的答案可以看出，Bootstrap的术语令人困惑。 如果你看bootstrap文档，你会发现类横向的表单实际上是一个表单，它们之间的字段是相互之间的，也就是大多数人会认为是垂直表单。 内嵌表单的正确类是form-inline 。 他们可能在线上引入了这个词，因为他们已经滥用了横向一词。

从这里的一些答案可以看出，有些人正在以这种forms使用这两个类。 其他人则认为，当他们真正想要内联时，他们需要forms化 。

我build议完全按照Bootstrap文档中的描述来做：

 <form class="form-inline"> <div class="form-group"> <label for="nameId">Name</label> <input type="text" class="form-control" id="nameId" placeholder="Jane Doe"> </div> </form> 

其中产生：

Answer 9

我设法解决我的问题。 似乎工作正常，并且意味着我不必手动添加宽度到我的所有input。

 .form-inline .form-group input { width: auto; } 

Answer 10

我相信你会find你的答案…这是我得到的解决scheme。

这是我的CSS。

 .field, .actions { margin-bottom: 15px; } .field label { float: left; width: 30%; text-align: right; padding-right: 10px; margin: 5px 0px 5px 0px; } .field input { width: 70%; margin: 0px; } 

和我的HTML …

 <h1>New customer</h1> <div class="container form-center"> <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post"> <div style="margin:0;padding:0;display:inline"></div> <div class="field"> <label for="customer_first_name">First name</label> <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" /> </div> <div class="field"> <label for="customer_last_name">Last name</label> <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" /> </div> <div class="field"> <label for="customer_addr1">Addr1</label> <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" /> </div> <div class="field"> <label for="customer_addr2">Addr2</label> <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" /> </div> <div class="field"> <label for="customer_city">City</label> <input class="form-control" id="customer_city" name="customer[city]" type="text" /> </div> <div class="field"> <label for="customer_pincode">Pincode</label> <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" /> </div> <div class="field"> <label for="customer_homephone">Homephone</label> <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" /> </div> <div class="field"> <label for="customer_mobile">Mobile</label> <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" /> </div> <div class="actions"> <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" /> </div> </form> </div> 

你可以看到这里的工作示例… http://jsfiddle.net/s6Ujm/

PS：我也是一个初学者，亲devise师…免费分享您的评论。

Answer 11

我认为这是你想要的，从bootstrap文档“水平forms使用Bootstrap的预定义网格类alignment标签和表单控件在水平布局通过添加.form-horizo​​ntal到表单。这样做更改.form-groupsperformance为网格行，所以不需要.row“。 所以：

 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> 

小提琴： http : //jsfiddle.net/beewayne/B9jj2/29/

Answer 12

 <div class="control-group"> <label class="control-label" for="firstname">First Name</label> <div class="controls"> <input type="text" id="firstname" name="firstname"/> </div> </div> 

我们也可以简单地使用它

 <label>First name: <input type="text" id="firstname" name="firstname"/> </label> 

Answer 13

好像添加style="width:inherit;" 到input工作正常。 jsfiddle演示

Answer 14

您可以在标签内使用span标签

  <div class="form-group"> <label for="rg-from"> <span>Ab:</span> <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> </label> </div>