具有字段集的多列表单 [英] Multi column forms with fieldsets

问题描述

抱歉，标题模糊，我不确定如何更好地描述它. 我目前正在将网站升级到Bootstrap 3，在一个表单行中进行多次输入时遇到了一个小问题.

Sorry for the vague title, I wasn't sure how to describe it better. I'm currently upgrading a website to bootstrap 3 and got a little problem with multiple inputs in one form row.

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

In bootstrap 2, I would have simply created two .controls.controls-row with .spanX elements inside to create the necessary columns. However, as these are removed in bootstrap 3, I replaced them with .form-group and the new column classes.

如果表单中有两行(在这种情况下为resp.fieldset)，则如果第二行是一个单行，则第一行变为不可编辑(请参见下面的代码和屏幕截图).

If I have two rows inside the form (resp. fieldset in this case), the first one becomes non-editable if the second one is a one-column row (see code and attached screenshot below).

我用萤火虫检查了元素，发现第二个字段集中的.col-sm-12位于.form-group上方，并且不允许用户单击其中的元素. 在第一个.col-sm-12字段中，一切正常.

I inspected the elements with firebug and saw that the .col-sm-12 from the second fieldset lays over the .form-group and does not let the user click the elements inside. In the first fieldset with the .col-sm-12 first, everything works fine.

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

I also tried placing a .row around each .form-group which solves the issue, but increases the width of the form line, so it does no longer has a left margin inside the fieldset.

有没有一种方法可以解决此问题而又不增加表格行宽度?

Is there a way to solve this without increasing the form-row width?

提前谢谢！

我将生成的代码添加为 jsFiddle

I added the generated code as a 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

推荐答案

在布局中需要调整几件事:

There are a couple of things that need to be adjusted in your layout:

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

1. You are nesting col elements within form-group elements. This should be the other way around (the form-group should be within the col-sm-xx element).

对于设计中的每个新行"，应始终使用row div.对于您的情况，您至少需要5行(用户名，密码和密码，标题/名字/姓氏，电子邮件，语言).否则，您有问题的.col-sm-12仍与上述3 .col-sm-4位于同一行上，从而导致总列数大于12，并导致重叠问题.

You should always use a row div for each new "row" in your design. In your case, you would need at least 5 rows (Username, Password and co, Title/First/Last name, email, Language). Otherwise, your problematic .col-sm-12 is still on the same row with the above 3 .col-sm-4 resulting in a total of columns greater than 12, and causing the overlap problem.

这是固定的演示.

问题部分HTML应该变成的摘录:

And an excerpt of what the problematic section HTML should become:

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

这篇关于具有字段集的多列表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！