form-horizo​​ntal 中的 form-group 过度拉伸了之前的 form-group

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) 应该使按钮与文本区域垂直对齐。

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

<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-8 内的col-md-1 中，所以它只得到.container 最大宽度的 1/12 * 8/12 = 5.5%（1170px）：~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 类来保持按钮与右侧齐平（此时，您指定的列数无关紧要，因为它们不会产生任何影响）Bootply example：

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

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