如何不修改Bootstrap row/col类实现按钮等高且居底？

当然可以！不用改动Bootstrap自带的row和col类，也不用position:absolute，咱们用Flexbox或者Table-Cell布局就能完美实现需求，下面给你两种实用方案：

方案一：Flexbox布局（推荐，现代浏览器友好） #

Flexbox是最直观的解决方案，我们只需要给行和列添加自定义类，完全不影响Bootstrap原有样式：

CSS代码 #

/* 自定义弹性行类，保留响应式换行特性 */
.flex-row {
  display: flex;
  flex-wrap: wrap;
}

/* 让列平分宽度并转为垂直弹性容器 */
.flex-row .col-md-4 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 按钮居底+强制等高 */
.flex-row .btn.btn-success {
  margin-top: auto; /* 自动把按钮推到容器底部 */
  align-self: flex-start; /* 保持按钮左对齐，可根据需求调整 */
  min-height: 46px; /* 统一按钮高度，适配不同文字长度 */
}

修改后的HTML #

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
  <!-- 仅添加自定义flex-row类，不修改原生row -->
  <div class="row flex-row">
    <div class="col-md-4">
      <p>expetendis illum vidisse laboris officia sint philosophari ab laboris nescius</p>
      <button class="btn btn-success">Button</button>
    </div>
    <div class="col-md-4">
      <p>ea pariatur laborum nulla quae sunt mandaremus laborum et pariatur legam velit adipisicing amet o admodum magna nescius noster noster</p>
      <button class="btn btn-success">Button</button>
    </div>
    <div class="col-md-4">
      <p>pariatur non varias ex ea sunt voluptatibus ingeniis summis doctrina transferrem incurreret nostrud officia proident magna do qui distinguantur fidelissimae familiaritatem lorem elit nescius enim litteris litteris iis enim cohaerescant</p>
      <button class="btn btn-success">Button</button>
    </div>
  </div>
</div>

方案二：Table-Cell布局（兼容旧版浏览器如IE8） #

如果需要兼容更老的浏览器，table-cell布局是稳妥的选择：

CSS代码 #

/* 自定义表格行类，强制宽度100% */
.table-row {
  display: table;
  width: 100%;
  table-layout: fixed; /* 让列宽度均匀分配 */
}

/* 把列转为表格单元格，覆盖Bootstrap的float属性 */
.table-row .col-md-4 {
  display: table-cell;
  vertical-align: top;
  float: none;
}

/* 列内容器设为100%高度，配合flex实现按钮居底 */
.table-row .col-md-4 > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 按钮居底+强制等高 */
.table-row .btn.btn-success {
  margin-top: auto;
  min-height: 46px;
}

修改后的HTML #

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
  <!-- 仅添加自定义table-row类 -->
  <div class="row table-row">
    <div class="col-md-4">
      <div>
        <p>expetendis illum vidisse laboris officia sint philosophari ab laboris nescius</p>
        <button class="btn btn-success">Button</button>
      </div>
    </div>
    <div class="col-md-4">
      <div>
        <p>ea pariatur laborum nulla quae sunt mandaremus laborum et pariatur legam velit adipisicing amet o admodum magna nescius noster noster</p>
        <button class="btn btn-success">Button</button>
      </div>
    </div>
    <div class="col-md-4">
      <div>
        <p>pariatur non varias ex ea sunt voluptatibus ingeniis summis doctrina transferrem incurreret nostrud officia proident magna do qui distinguantur fidelissimae familiaritatem lorem elit nescius enim litteris litteris iis enim cohaerescant</p>
        <button class="btn btn-success">Button</button>
      </div>
    </div>
  </div>
</div>

关键说明 #

• 两种方案都没有修改Bootstrap原生的row和col类，仅通过添加自定义类实现需求，不会干扰其他页面元素。
• margin-top: auto是核心技巧：在flex容器中，这个属性会自动将元素推到容器底部，无论上方内容高度如何变化。
• 设置min-height是为了确保所有按钮高度一致，避免因按钮文字长度不同导致的高度差异。

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