42

抱歉标题含糊不清，我不知道如何更好地描述它。我目前正在将一个网站升级到 bootstrap 3，并且在一个表单行中的多个输入出现了一点问题。

在引导程序 2 中，我将简单地创建两个.controls.controls-row内部.spanX元素来创建必要的列。但是，由于这些在 bootstrap 3 中被删除，我将它们替换.form-group为新的列类。

如果我在表单中有两行（在这种情况下是字段集），如果第二行是单列行，则第一行将变为不可编辑（请参见下面的代码和随附的屏幕截图）。

我用萤火虫检查了元素，发现.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

不可编辑的表单元素

4

2 回答 2

70

布局中有几件事需要调整：

  1. 您正在元素中嵌套col元素form-group。这应该是相反的方式（form-group应该在col-sm-xx元素内）。

  2. 您应该始终row为设计中的每个新“行”使用一个 div。在您的情况下，您至少需要 5 行（用户名、密码和 co、标题/名字/姓氏、电子邮件、语言）。否则，您的问题.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>
于 2013-08-25T12:50:25.927 回答
15

我不同意 .form-group 应该在 .col-*- n元素内。根据我的经验，当您在表单中使用 .form-group （如 .row ）时，所有适当的填充都会自动发生。

<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 的水平边界绘制到包含字段集的边界之外。

于 2013-12-04T09:53:00.137 回答