形式水平的形式组在以前的形式组中过度拉伸

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-group在.form-horizo​​ntal内部表现得像.row因此偏移按钮（col-md-offset-11）应该将按钮垂直对齐到textarea。

此面板加载到另一页的行中：

<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的网格系统不完全相同 - 实际上是因为你为Post按钮分配的大小太窄了。 （它位于col-md-1内的col-md-8，所以它只得到.container（1170px）的最大宽度的1/12 * 8/12 = 5.5％：〜65px，那是甚至没有考虑15px填充。）

因此，按钮（不能断开到新线以保留在窄列内）将溢出可用空间，导致对齐关闭。

您可以通过以下几种方式解决此问题：您可以通过增加可以占用的列数来为按钮分配更多空间，然后让按钮展开到100％宽度以触及右边缘Bootply example ：

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类来保持按钮与右侧齐平（此时，您指定的列数无关紧要，因为它们不会产生任何影响）{{ 3}}：

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

希望这有帮助！如果您有任何问题，请告诉我。