Question

对于模糊的标题感到抱歉，我不确定如何更好地描述它。我目前正在将一个网站升级到bootstrap 3，并且在一个表单行中有多个输入的问题。

在bootstrap 2中，我只需在里面创建两个带有.controls.controls-row元素的.spanX来创建必要的列。但是，由于这些已在bootstrap 3中删除，我将其替换为.form-group和新列类。

如果我在表单中有两行（在本例中为resp.fieldset），如果第二行是单列行，则第一行变为不可编辑（请参阅下面的代码和附带的截图）。

我用firebug检查了元素，发现第二个字段集中的.col-sm-12位于.form-group之上，并且不允许用户单击里面的元素。在第一个带有.col-sm-12的字段集中，一切正常。

我还尝试在每个.row周围放置.form-group来解决问题，但是增加了表单行的宽度，因此它不再在字段集中有左边距。

有没有办法在不增加表格行宽度的情况下解决这个问题？

提前致谢！

编辑：我将生成的代码添加为jsFiddle

%fieldset
  %legend= t('.login_information')
  .form-group
    .col-sm-12
      = f.label :login
      = f.text_field :login, :class => 'form-control', :required => true

  .form-group
    .col-sm-6
      = f.label :password
      = f.password_field :password, :class => 'form-control'
    .col-sm-6
      = f.label :password_confirmation
      = f.password_field :password_confirmation, :class => 'form-control'

%fieldset
  %legend= t('.personal_details')
  .form-group
    .col-sm-4
      = f.label :title
      = f.text_field :title, :class => 'form-control'
    .col-sm-4
      = f.label :firstname
      = f.text_field :firstname, :class => 'form-control', :required => true
    .col-sm-4
      = f.label :lastname
      = f.text_field :lastname,  :class => 'form-control', :required => true

  .form-group
    .col-sm-12
      = f.label :email
      = f.text_field :email, :class => 'form-control email', :required => true

Non-editable form elements

Answer 1

您的布局需要调整一些事项：

您正在col元素中嵌套form-group个元素。这应该是另一种方式（form-group应该在col-sm-xx元素内）。
您应该始终为设计中的每个新“行”使用row div。在您的情况下，您至少需要5行（用户名，密码和合作，标题/名字/姓氏，电子邮件，语言）。否则，您的有问题的.col-sm-12仍然与上面的3 .col-sm-4位于同一行，导致总数大于12的列，并导致重叠问题。

这是一个固定的demo。

以及HTML应该成为问题的部分的摘录：

<fieldset>
    <legend>Personal Information</legend>
    <div class='row'>
        <div class='col-sm-4'>    
            <div class='form-group'>
                <label for="user_title">Title</label>
                <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_firstname">First name</label>
                <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_lastname">Last name</label>
                <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-sm-12'>
            <div class='form-group'>

                <label for="user_email">Email</label>
                <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
</fieldset>

Answer 2

我不同意.form-group应该在.col - * - n 元素中。根据我的经验，当您在表单中使用类似.row的.form-group时，会自动执行所有适当的填充。

<div class="form-group">
    <div class="col-sm-12">
        <label for="user_login">Username</label>
        <input class="form-control" id="user_login" name="user[login]" required="true" size="30" type="text" />
    </div>
</div>

查看此demo。

通过在表单标记中添加.form-horizontal来稍微改变演示会改变一些填充。

<form action="#" method="post" class="form-horizontal">

查看此demo。

如有疑问，请在Chrome中进行检查或在Firefox中使用Firebug来找出填充和边距等内容。在edsioufi的小提琴中使用.row，因为.row使用负的左右边距，从而绘制div类的水平边界。超出包含字段集的边界。

具有字段集的多列表单

2 个答案: