Bootstrap 3中按钮无法按CSS设置对齐到列底部的原因及解决方法

首先明确：Bootstrap 3没有内置的直接类来实现元素对齐到列底部，但可以通过两种不依赖固定高度/绝对定位的实用方案来解决：

方案1：表格布局（兼容旧浏览器） #

利用表格布局的特性让所有列自动等高，通过垂直对齐属性控制按钮位置，适合需要兼容IE9及以下的场景。

修改后的代码：

.m-t {
  margin-top: 15px;
}
.form-group.table-row {
  display: table;
  width: 100%;
}
.form-group.table-row [class*="col-"] {
  display: table-cell;
  float: none;
}
/* 非按钮列保持顶部对齐，标签和输入框正常显示 */
.form-group.table-row [class*="col-"]:not(.btn-col) {
  vertical-align: top;
}
/* 按钮列设置底部对齐 */
.btn-col {
  vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-12">
  <div class="panel blank-panel">
    <div class="panel-body">
      <form>
        <div class="form-group table-row">
          <div class="col-sm-3 m-t">
            <label for="fname">First Name</label>
            <input type="text" id="fname" class="form-control">
          </div>
          <div class="col-sm-3 m-t">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" class="form-control">
          </div>
          <div class="col-sm-2 m-t">
            <label for="gender">Gender</label>
            <select class="form-control">
              <option value="" selected>Please Select</option>
              <option value="1">Female</option>
              <option value="2">Male</option>
              <option value="3">Unspecified</option>
            </select>
          </div>
          <div class="col-sm-2 m-t">
            <label for="birthDate" class="control-label">Date of Birth</label>
            <div class="input-group date" id="birthDateDiv">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              <input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
            </div>
          </div>
          <div class="col-sm-2 m-t btn-col">
            <button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

方案2：Flexbox布局（现代浏览器友好） #

如果不需要兼容老旧浏览器，Flexbox是更简洁灵活的选择，把内联样式提取成类，代码更规范：

.m-t {
  margin-top: 15px;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
}
.flex-row [class*="col-"] {
  display: flex;
  flex-direction: column;
}
/* 让按钮自动推到列底部 */
.btn-align-bottom {
  margin-top: auto;
}

修改后的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-12">
  <div class="panel blank-panel">
    <div class="panel-body">
      <form>
        <div class="form-group flex-row">
          <div class="col-sm-3 m-t">
            <label for="fname">First Name</label>
            <input type="text" id="fname" class="form-control">
          </div>
          <div class="col-sm-3 m-t">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" class="form-control">
          </div>
          <div class="col-sm-2 m-t">
            <label for="gender">Gender</label>
            <select class="form-control">
              <option value="" selected>Please Select</option>
              <option value="1">Female</option>
              <option value="2">Male</option>
              <option value="3">Unspecified</option>
            </select>
          </div>
          <div class="col-sm-2 m-t">
            <label for="birthDate" class="control-label">Date of Birth</label>
            <div class="input-group date" id="birthDateDiv">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              <input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
            </div>
          </div>
          <div class="col-sm-2 m-t">
            <button class="btn btn-sm btn-primary btn-align-bottom" type="submit" id="addPerson">Add Person</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

方案说明 #

• 表格布局兼容性强，能适配大部分旧浏览器；
• Flexbox布局代码更简洁，是现代前端的首选方案；
• 两种方案都无需固定高度或绝对定位，可自适应列的内容高度变化。

内容的提问来源于stack exchange，提问作者Millhorn