面板布局内的bootstrap形式看起来不对

Question

如果我在引导程序面板中定义了一个表单，那么表单组布局就会变成碎片。

我将表格涂成红色，以便我可以看到它的位置;）这里是jsFiddle：https://jsfiddle.net/DTcHh/

我发现如果我添加

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

到css，然后我得到这个

（我将表格涂成红色，以便我可以看到它的位置;）

所以它看起来已修复，但对我来说似乎是一个可怕的黑客

• 这是bootstrap中的错误
• 我是否只需要应用此css
• 我的表单定义有问题吗？

感谢

Answer 1

根据引导文档（http://getbootstrap.com/css/#forms-horizontal），类form-horizontal使<form>表现得像.row，因此您无需添加.col-**-* .row来自群组，标签和东西。文档给你一个例子o

但是.row内有.col-**-*而.row没有.col-**-*。 .row有一个负余量来删除其父级的填充，所以没有.form-horizontal作为父级，它有2个负边距。

所以它有点混乱。我建议删除您的public function getAuthPassword() { return $this->encrypted_password; } 和{{1}}课程，以达到您想要的效果，或者像您已经做的那样添加保证金。

Here it's a fiddle

Answer 2

感谢另一个答案，指出我正确的方向。我个人喜欢添加一个包含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>

Here's the fiddle