如何在引导程序中将按钮与行/列的底部对齐？答案

【问题标题】：How do I align the button to the bottom of the row/column in bootstrap?如何在引导程序中将按钮与行/列的底部对齐？
【发布时间】：2014-05-30 07:00:30
【问题描述】：

我有 4 列的行，每列都有一个标题和一些文本。大多数列具有相似数量的文本，并向下按列中的按钮以匹配其余列。但是，一列的文本较少，并且没有将按钮向下推得足够远。

有没有办法将按钮对齐到行的底部？我想实现这一点并同时保持响应，因此当屏幕较小时它看起来像这样：

这是我刚才的页面标记：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>less text here</p>
      <p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

有几种方法可以做到这一点：

给容器一个固定的高度。这并不理想，因为为了让它看起来不错，您必须为每个断点设置不同的高度。
您还需要将按钮设置为position: absolute、bottom: 0 并添加一些底部填充/边距。
使用一些 javascript 来匹配高度，例如 match height。您还需要像上一点那样设置位置。
添加一个额外的行并在 4 个新列内重复您的按钮。然后使用 bootstraps responsive classes 显示或隐藏原始按钮和新按钮。

【讨论】：

【解决方案2】：

例如设置最小高度等于包含 div 的文本

.col-md-3{min-height:300px;}

【讨论】：

【解决方案3】：

在 col-md-3 上设置一个明确的高度。

【讨论】：