bootstrap-3 水平表单标签不停留在顶部输入字段答案

【问题标题】：bootstrap-3 horizontal forms label not staying at the top input fieldsbootstrap-3 水平表单标签不停留在顶部输入字段
【发布时间】：2013-08-29 22:10:24
【问题描述】：

当使用带有 .form-horizontal 的 Bootstrap 3 以及下面的引导类时，我会得到顶部带有标签的表单，这正是我想要的。 http://bootply.com/73486

但是，在图 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>

图片 1

图片 2

但是，当我尝试将输入包装在网格列中以将宽度减小到我想要的大小时，标签会移动到表单输入的一侧而不是顶部。

 <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>

【问题讨论】：

请提供一个 jsFiddle 或 Bootply

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

第一个示例中的代码是正确的。要减小宽度而不转换为表单水平样式，请尝试将整个表单组（或字段集）包装在一个较小的 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>

【讨论】：

【解决方案2】：

`<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>`

试试这个

【讨论】：

感谢您贡献并展示 Rails 的方式来做与接受的答案相同的事情。您已经在 rails form-helper f.text_field 中移动了 CSS 类，但它仍然是必不可少的。谢谢和欢呼

【解决方案3】：

在这种情况下，您可以为表单提供 col-lg-10。由于您实际上是在尝试减小表单大小而不是单个输入字段，因此这将是可取的。

关于您的 .form-horizontal 用法。如果你喜欢顶部的标签，你不应该使用 .form-horizontal，只是一个没有类的表单。这也可以解决您的问题。

在 Bootstrap 3 中，.form-horizontal 的工作方式发生了很大变化。它现在的工作方式是将表单元素包装在 .col-x-x div 中，使其具有所需的大小，并让标签在其旁边流动。这与 bootstrap 2 相比具有优势，您可以轻松更改标签列的宽度。

PS .control-label 不再需要

【讨论】：