水平窗體內的窗體組正在過度拉伸以前的窗體組

Question

我正在使用Bootstrap 3.3.6，面板內部有一個非常簡單的表單：

這很簡單，但是“發布”按鈕排列不好。

那就是表格后面的HTML：

<div class="panel panel-primary">
  <div class="panel-heading">Say something...</div>
  <div class="panel-body">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-md-12">
          <textarea class="form-control"
                    rows="5"
                    placeholder="What are you up to?"></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-11 col-md-1">
            <button type="submit" class="btn btn-primary">Post</button>
        </div>
      </div>
    </form>
  </div>
</div>

根據Bootstrap文檔，在.form-horizo​​ntal中，.form-group的行為類似於.row，因此，使按鈕偏移（col-md-offset-11）可使按鈕與文本區域垂直對齊。

此面板已加載到另一頁的一行中：

<div class="container">
  ...
  <div class="row">
    <div class="col-md-offset-2 col-md-8">
      <div ui-view="quickPost"></div>
    </div>
  </div>
  ...

由於.form-group的行為類似於.row，因此在.row中時應該可以正常工作（將行包裝在行中是可以的）。

由於我沒有CSS和Bootstrap的經驗，因此我很確定這是我的愚蠢疏忽。 誰能發現我犯了什么錯誤？

Answer 1

這里的問題並不完全是Bootstrap的網格系統-實際上是因為您為“發布”按鈕分配的大小太窄了。 （它位於col-md-1內部的col-md-8 ，因此它僅獲得.container （1170px）最大寬​​度的5.5％的1/12 * 8/12 =〜65px，這甚至不占用考慮到15px的填充。）

結果，按鈕（不能換成新行以保留在窄列內）將溢出可用空間，導致對齊顯示消失。

您可以通過以下兩種方法解決此問題：您可以通過增加按鈕可以占用的列數來為按鈕分配更多空間，然后將按鈕擴展到100％的寬度以觸摸右邊的Bootply示例 ：

button {
    width: 100%;
}

<!-- [...] -->
    <div class="col-md-offset-10 col-md-2">
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
<!-- [...] -->

或者，您可以利用Bootstrap的pull-right類來保持按鈕與右側齊平（此時，您指定的列數無關緊要，因為它們不會起作用） 。Bootply示例 ：

<!-- [...] -->
    <div class="col-md-offset-11 col-md-1">
        <button type="submit" class="btn btn-primary pull-right">Post</button>
    </div>
<!-- [...] -->

希望這可以幫助！ 如果您有任何疑問，請告訴我。