具有字段集的多列表单

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

Answer 1

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

1. 您col在form-group元素中嵌套元素.这应该是另一种方式(form-group应该在col-sm-xx元素内).

2. 您应该始终row为设计中的每个新"行" 使用div.在您的情况下,您至少需要5行(用户名,密码和合作,标题/名字/姓氏,电子邮件,语言).否则,您的问题.col-sm-12仍然与上面的3相同,.col-sm-4导致总共大于12的列,并导致重叠问题.

这是一个固定的演示.

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

看看这个演示.

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

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

看看这个演示.

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