多字段与表格集

对不起，模糊的标题，我不知道如何更好地描述它。 我目前正在升级一个网站引导3，并得到一个表格行多input一个小问题。

在bootstrap 2中，我只是简单地创build了两个.spanX .controls.controls-row ，里面有.spanX元素来创build必要的列。 但是，由于这些在引导3中被删除，我用.form-group和新的列类replace了它们。

如果我在表单中有两行（在这个例子中为fieldset），那么如果第二行是一列的行（见下面的代码和附加屏幕截图），那么第一行就变成不可编辑的。

我用萤火虫检查了元素，发现第二个字段集的.col-sm-12放在.form-group ，不让用户点击里面的元素。 在第一个.col-sm-12 ，一切正常。

我也尝试在每个解决问题的.form-group放置一个.row ，但是增加了表单行的宽度，所以它在fieldset中不再有左边距。

有没有办法解决这个问题，而不增加表格行宽？

提前致谢！

编辑：我添加生成的代码作为一个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. 您在form-group元素中嵌套col元素。 这应该是相反的方式（ form-group应该在col-sm-xx元素内）。

2. 你应该总是在你的devise中为每一个新的“行”使用一个row div。 在你的情况下，你将需要至less5行（用户名，密码和合作，标题/名字，电子邮件，语言）。 否则，有问题的.col-sm-12与上述.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来查找填充和边距等内容。 在表单中使用.row失败了edsioufi的小提琴，因为.row使用负的左边界和右边界，从而绘制分类的水平边界超越了包含的字段集的边界。