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

Question

当使用带有.form-horizo​​ntal的Bootstrap 3时，使用下面的bootstrap类，我得到顶部标签的表单，这就是我想要的。 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>

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

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

试试这个

Answer 3

在这种情况下，你可以给表格一个col-lg-10。由于您实际上是在尝试缩小表单大小而不是单个输入字段，因此这将是更可取的。

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

在Bootstrap 3中，.form-horizo​​ntal的工作方式发生了很大变化。它现在的工作方式是将表单元素包装在.col-x-x div中，以使其具有所需的大小，并让标签在其旁边流动。这对bootstrap 2有一个好处，你可以轻松地改变标签列的宽度。

不再需要PS .control-label