twitter-bootstrap bootstrap-3 水平表单标签不停留在顶部输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18175076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-3 horizontal forms label not staying at the top input fields
提问by brg
When using Bootstrap 3 with .form-horizontal, with the bootstrap classes below, I get forms with the label on top which is what I want. http://bootply.com/73486
当使用带有 .form-horizontal 的 Bootstrap 3 和下面的引导类时，我会得到顶部带有标签的表单，这正是我想要的。http://bootply.com/73486
However, in Image 2, I try to reduce the width to my desired size, using classes like .col-lg-*, which suddenly forces the labels to the side instead of remaining on top. I have tried different sizes to no avail..
但是，在图 2 中，我尝试使用 .col-lg-* 之类的类将宽度减小到我想要的大小，这会突然将标签强制放在一边而不是留在顶部。我试过不同的尺寸都无济于事..
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
Image 1
图 1
Image 2
图 2
However, when I try to wrap inputs in grid columns so as to reduce the width to my desired size, the labels move to the side of the form inputs instead of on top.
但是，当我尝试将输入包装在网格列中以将宽度减小到我想要的大小时，标签会移动到表单输入的一侧而不是顶部。
<div class="form-group">
<label class="control-label col-lg-2"> <%= f.label :title %></label>
<div class="col-lg-10">
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
</div>
采纳答案by Joe Conlin
The code in your first example is correct. To reduce the width without shifting into a form-horizontal style, try wrapping the entire form-group (or the field set) in a smaller div.
您的第一个示例中的代码是正确的。要减少宽度而不转换为表单水平样式，请尝试将整个表单组（或字段集）包装在一个较小的 div 中。
<div class="col-lg-10">
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
</div>
回答by Ankit
`<div class="col-lg-10">
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<%= f.text_field :title, :placeholder => "title", :class => "form-control" %>
</div>
</div>`
Try this
试试这个
回答by JelteF
You could give the form a col-lg-10 in this case. Since you're actually trying to reduce the form size and not an individual input field this would be preferable.
在这种情况下，您可以为表单提供 col-lg-10。由于您实际上是在尝试减小表单大小而不是单个输入字段，因此最好这样做。
On the subject of your .form-horizontal usage. If you like the labels on top, you shouldn't use .form-horizontal, just a form without a class. This would fix your problem as well.
关于您的 .form-horizontal 用法。如果你喜欢顶部的标签，你不应该使用 .form-horizontal，而只是一个没有类的表单。这也可以解决您的问题。
In Bootstrap 3 the way .form-horizontal works changed a lot. The way it now works is by wrapping the form element in a .col-x-x div to give it the desired size and let the labels flow next to it. This has as an advantage to bootstrap 2 that you can easily change the width of the label column.
在 Bootstrap 3 中，.form-horizontal 的工作方式发生了很大变化。它现在的工作方式是将表单元素包装在 .col-xx div 中以赋予它所需的大小并让标签在它旁边流动。这对 bootstrap 2 有一个好处，即您可以轻松更改标签列的宽度。
PS .control-label is not needed anymore
PS .control-label 不再需要
