无需position absolute，用Bootstrap4实现.card-footer固定在div底部

你说得对，用Bootstrap 4的原生布局能力来实现.card-footer始终贴在容器底部，确实比position:absolute要靠谱得多——绝对定位虽然能快速搞定，但很容易踩内容重叠的坑，而且不够灵活。下面我给你梳理一下更贴合Bootstrap设计思路的解决方案：

问题根源 #

你的原始代码里，三个卡片因为正文内容长度不一样，导致footer位置高低不齐。用绝对定位的话，虽然能把footer钉死在底部，但得给容器设固定高度，要是内容超出容器高度，就会被footer挡住，体验很差。

Bootstrap 4原生实现方案 #

Bootstrap 4的card组件本身就支持flex布局来统一卡片高度，并且自动把footer推到底部。只需要调整几个类名和结构就行：

修正后的完整HTML代码 #

<div class="container">
  <div class="row">
    <div class="col-md-4 mb-3"> <!-- 把自定义的m10换成Bootstrap标准的mb-3，控制底部间距 -->
      <div class="card h-100"> <!-- 用原生card类替代newsbox，h-100让卡片占满列的高度 -->
        <img src="https://via.placeholder.com/350x150" class="card-img-top" alt="News cover">
        <div class="card-body d-flex flex-column"> <!-- 把card-body设为垂直flex容器 -->
          <h4 class="card-title">What is Lorem Ipsum?</h4>
          <p class="card-text flex-grow-1"> <!-- flex-grow-1让文本区域填充剩余空间，footer自然被挤到底部 -->
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>
        </div>
        <div class="card-footer">
          <small class="text-muted">13 februari, 2019</small>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="card h-100">
        <img src="https://via.placeholder.com/350x150" class="card-img-top" alt="News cover">
        <div class="card-body d-flex flex-column">
          <h4 class="card-title">What is Lorem Ipsum?</h4>
          <p class="card-text flex-grow-1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>
        </div>
        <div class="card-footer">
          <div class="row">
            <div class="col-12">
              <small class="text-muted">13 februari, 2019</small>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="card h-100">
        <img src="https://via.placeholder.com/350x150" class="card-img-top" alt="News cover">
        <div class="card-body d-flex flex-column">
          <h4 class="card-title">What is Lorem Ipsum?</h4>
          <p class="card-text flex-grow-1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </p>
        </div>
        <div class="card-footer">
          <small class="text-muted">13 februari, 2019</small>
        </div>
      </div>
    </div>
  </div>
</div>

核心改动点 #

1. 替换自定义容器类：用Bootstrap原生的.card代替你写的.newsbox，减少自定义样式，更符合框架规范。
2. 统一卡片高度：给每个.card加.h-100类，让所有卡片都占满所在列的高度，保证视觉上对齐。
3. Flex布局调整：给.card-body加.d-flex flex-column，把它变成垂直方向的flex容器；再给文本段落.card-text加.flex-grow-1，让文本区域自动填充剩余空间，footer就会被自然推到容器底部。
4. 规范间距类：把错误的m10换成Bootstrap标准的.mb-3，统一控制卡片之间的底部间距。

为什么这个方案比position:absolute好？ #

• 自适应高度：不需要设置固定高度，内容变长时容器会自动拉伸，不会出现内容被footer遮挡的问题。
• 原生框架支持：完全用Bootstrap自带的类实现，不用额外写CSS，后期维护更省心。
• 响应式友好：在手机、平板等不同屏幕尺寸下，布局会自动适配，不会出现错位问题。

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