当使用带有 .form-horizontal 的 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>
最佳答案
您第一个示例中的代码是正确的。要减少宽度而不转变为水平表单样式,请尝试将整个表单组(或字段集)包装在一个较小的 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>
关于css - bootstrap-3 水平表单标签不停留在顶部输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18175076/