面板布局內的bootstrap形式看起來不對

Question

如果我在引導程序面板中定義了一個表單，那么表單組布局就會變成碎片。

我將表格塗成紅色，以便我可以看到它的位置;）這里是jsFiddle： https ：//jsfiddle.net/DTcHh/

我發現如果我添加

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

到了css，然后我得到了這個

（我將表格塗成紅色，以便我可以看到它的位置;））

所以它看起來像是固定的，但對我來說似乎是一個可怕的黑客

• 這是bootstrap中的錯誤
• 我只需要申請這個CSS
• 我的表單定義有問題嗎？

謝謝

Answer 1

根據bootstrap docs（ https://getbootstrap.com/docs/3.4/css/#forms-horizo​​ntal ），類form-horizontal使<form>得像.row所以你不需要添加它並且有.col-**-*來自群組，標簽和東西。 文檔給你一個例子o

但你在.row有一個.row而沒有.col-**-* 。 .row有刪除父母填充的負邊距，因此沒有.col-**-*作為父級，它有2個負邊距。

所以它有點混亂。 我建議刪除你的.row和.form-horizontal類來實現你想要的外觀或像你已經做的那樣添加邊距。

這是一個小提琴 。

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>

這是小提琴