如何在 Bootstrap 3 列中垂直对齐表单元素？答案

【问题标题】：How do I vertically align form elements in Bootstrap 3 columns?如何在 Bootstrap 3 列中垂直对齐表单元素？
【发布时间】：2014-10-02 20:02:51
【问题描述】：

我有以下代码，用于垂直对齐我的引导表单部分中的按钮：

HTML：

<div class="form-group">
    <div class="row">
        <div class="col-md-9">
            <label for="isbn">ISBN# (10 or 13)</label>
            <input type="text" class="form-control" id="isbn" placeholder="0000000000" />
        </div>
        <div class="col-md-3">
            <button class="btn btn-default form-isbn" type="button">Check ISBN</button>
        </div>
    </div>
</div>

CSS：

.form-isbn {
    display: table-cell;
    vertical-align: bottom;
    float: none;
}

由于某种原因，它仍然无法正常工作。附加的屏幕截图显示了正在发生的事情（似乎垂直对齐是...默认情况下是顶部？我需要按钮位于行的底部以正确对齐它旁边的输入字段。

知道问题可能是什么吗？我有点傻眼，我在 SO 上查看了几个类似的问题，但无济于事。 :(

【问题讨论】：

使用form-horizontal 类。 Bootstrap 对对齐不是form-horizontal 或form-inline 的表单没有任何特殊支持。

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

试试这个。

<div class="form-group">
  <div class="row">
    <div class="col-md-12">
      <label for="isbn">ISBN# (10 or 13)</label>
    </div>
    <div class="col-md-9">
      <input type="text" class="form-control" id="isbn" placeholder="0000000000" />
    </div>
    <div class="col-md-3">
      <button class="btn btn-default form-isbn" type="button">Check ISBN</button>
    </div>
  </div>
</div>

希望对您有所帮助。

*尝试禁用你为 .form-isbn 制作的 css

【讨论】：

【解决方案2】：

我最近遇到了这个问题，并想实现同样的目标。使用纯引导类实现的一种方法是将输入和按钮推送到单独的行并删除第一行的底部边距，以使标签与之前一样接近输入

<div class="form-group">
    <div class="row">
        <div class="col-md-9 mb-0">
            <label for="isbn">ISBN# (10 or 13)</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <input type="text" class="form-control" id="isbn" placeholder="0000000000" />
        </div>
        <div class="col-md-3">
            <button class="btn btn-default" type="button">Check ISBN</button>
        </div>
    </div>
</div>

【讨论】：