如何在Bootstrap 4.0.0中实现按钮始终底部对齐？

嘿，针对你用Bootstrap 4.0.0实现按钮始终对齐底部的需求，我刚好有个适配官方定价示例风格的解决方案，用Bootstrap自带的flex工具类就能搞定，不用额外写复杂的自定义CSS：

核心思路 #

利用Bootstrap的flexbox布局工具，让卡片内部的内容区域自动填充剩余垂直空间，从而把按钮“推”到卡片底部，完美适配不同长度的卡片内容。

具体实现步骤 #

• 给你的卡片容器（比如默认的.card元素）添加d-flex flex-column类，将卡片设置为垂直方向的flex容器
• 给卡片里的内容容器（比如.card-body）添加flex-grow-1类，让它占据卡片内除头部、按钮区域外的所有剩余垂直空间

示例代码 #

<div class="col-md-4">
  <div class="card mb-4 box-shadow d-flex flex-column">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">免费版</h4>
    </div>
    <div class="card-body flex-grow-1">
      <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ 月</small></h1>
      <ul class="list-unstyled mt-3 mb-4">
        <li>10 用户包含</li>
        <li>2 GB 存储空间</li>
        <li>支持邮件</li>
        <li>无电话支持</li>
      </ul>
    </div>
    <div class="card-footer">
      <button type="button" class="btn btn-lg btn-block btn-outline-primary">注册免费版</button>
    </div>
  </div>
</div>

原理说明 #

• d-flex flex-column：把卡片转换为垂直方向的flex布局容器，内部元素会按垂直顺序排列
• flex-grow-1：让.card-body在flex容器中自动扩展，占据所有可用的垂直空间，这样按钮所在的底部区域就会被固定在卡片最下方，不管.card-body里的内容长短如何变化

这个方案完全贴合Bootstrap 4的设计体系，和官方定价示例的结构兼容度很高，你可以直接把这些类加到现有代码对应的元素上就能看到效果。

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