Css 引导窗体内部面板布局看起来错误

如果我在引导面板中定义了一个表单，那么表单组布局就会崩溃

我把表格涂成红色，以便我能看到它在哪里；）以下是JSFIDLE：

我发现如果我加上

.panel-body .form-horizontal .form-group {
    margin-right: 25px;
    margin-left: 25px;
}

对于css，我得到了这个

（我把表格涂成红色，以便我能看到它在哪里；）

看起来它已经修好了，但对我来说是个可怕的黑客

• 这是引导程序中的错误吗
• 我只需要应用这个css吗
• 我的表单定义有问题吗

---

谢谢

根据bootstrap docs（），类

表单水平

使

的行为类似于

.row

，因此您不需要添加它，而是将

.col-***

从组、标签和内容中放入。这些文件给你举了一个例子

但是在

.row

中有一个

.row

，没有

.col-***

.row

具有负边距以删除其父级的填充，因此，如果没有

.col-***

作为父级，则它具有2个负边距

所以有点乱。我建议删除

.row

和

.form horizontal

类以获得所需的外观，或者像以前一样添加边距

---

.

感谢另一个答案为我指明了正确的方向。我个人喜欢在其他表单组周围添加一个12宽度的列

<form class="form-horizontal" style="background: red;">
    <div class="col col-xs-12">
      <div class="form-group">
        <label>field 1</label>
        <input class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label>field 2</label>
        <input class="form-control" type="text" />
      </div>
    </div>
  </form>

字段1
字段2

---

啊！丢失了JSFIDLE。新的在