twitter bootstrap 3-具有字段集的多列表单

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

在引导程序2中,我将简单地创建两个.row,并在其中包含.form-group元素以创建必要的列。但是,由于这些在引导程序3中已删除,因此我将它们替换为.col-sm-12和新的列类。

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

我检查了带有萤火虫的元素,发现第二个字段集中的.row位于.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

stex asked 2020-08-12T01:52:12Z
2个解决方案
69 votes

在布局中需要调整以下几点:

  1. 您正在将row元素嵌套在.col-sm-12元素中。 这应该是另一种方法(.col-sm-4应该在col-sm-xx元素之内)。

  2. 您应该始终对设计中的每个新“行”使用300747423361951414368 div。 对于您的情况,您至少需要5行(用户名,密码和密码,标题/名字/姓氏,电子邮件,语言)。 否则,您有问题的300747423361951414369仍与上述3 300747423361951414370放在同一行上,从而导致总列数大于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>
edsioufi answered 2020-08-12T01:52:36Z
15 votes

我不同意.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-horizontal来稍微更改演示,可以更改其中的一些填充。

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

查看此演示。

如有疑问,请在Chrome中进行检查,或在Firefox中使用Firebug找出填充和边距之类的内容。 在表单中使用.row不会使edsioufi费劲,因为.row使用负的左边和右边距,从而将分类为.row的div的水平边界绘制到包含字段集的边界之外。

OregonJeff answered 2020-08-12T01:53:14Z
translate from https://stackoverflow.com:/questions/18428871/multi-column-forms-with-fieldsets