Forms 具有字段集的多列窗体

对不起，这个模糊的标题，我不知道如何更好地描述它。 我目前正在将一个网站升级到Bootstrap3，在一个表单行中有多个输入时遇到了一个小问题

在bootstrap 2中，我只需创建两个

.controls.controls行，其中包含
.spanX
元素，以创建必要的列。
但是，由于它们在Bootstrap3中被删除，我将它们替换为
.formgroup
和新的列类

如果表单中有两行（本例中分别为字段集），则如果第二行为单列行，则第一行将不可编辑（请参见下面的代码和附带的屏幕截图）

我用firebug检查了元素，发现第二个字段集中的
.col-sm-12
位于
.form组
上，不允许用户单击其中的元素。
在第一个字段集中，首先使用
.col-sm-12
，一切正常

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

有没有办法在不增加表单行宽度的情况下解决此问题

提前谢谢

编辑：我将生成的代码添加为

在布局中有两件事需要调整：

您正在
表单组
元素中嵌套
列
元素。这应该是另一种方式（表单组
应该在
列sm xx
元素中）

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

这里有一个固定的

以及问题部分HTML应该变成什么的摘录：


个人信息
标题
名字
姓
电子邮件
我不同意.form组应该在.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 horizontal来稍微修改演示，可以更改一些填充

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



看看这个

如果有疑问，可以在Chrome中检查，或者在Firefox中使用Firebug来找出填充和边距之类的东西。在edsioufi的fiddle中，在表单中使用.row失败，因为.row使用负的左、右边距，从而将已分类的div的水平边界绘制到包含字段集的边界之外。
是否可以发布生成的HTML代码？或者创建一个，那会更好。我创建了一个JSFIDLE，我自己应该想到的，谢谢！似乎我把
.formgroup
误解为旧的
.controlgroup
的替代品，而不是将一个元素与可能的附加项分组。关于行：这是我的想法，但这会删除字段集中元素的填充。我想我必须自己添加它。@stex不是自己添加填充，而是用Bootstrap 3
.container
div包装所有代码。我指的是字段集中表单字段的填充，就像在我的示例中一样。但是，我可以在表单中的每个字段集中放置一个容器以获得所需的填充，但是我不确定容器类是否应该这样使用。你是对的，你可能应该把它添加到自定义容器中。我使用的是，但是你的方法会产生不一致的垂直间距。“Email”标签与“Title”输入对齐，而“Password”与“Username”输入对齐59px。我认为问题在于，在XS模式下，标签上方缺少空格。该问题是由表单组未正确清除列sm-*浮动引起的。将“clearfix”类添加到带有“formgroup”类的div中可以修复它。请参见下面的演示--.
。仅当您指定
表单水平
时，表单组
才充当行。这不是您的答案所建议的意见问题。在
表单组中使用
col-*
会导致底部没有边距。是的，
clearfix
处理了这个问题，但这似乎是一个解决办法。
<form action="#" method="post" class="form-horizontal">