Bootstrap 4卡片页脚顶部边框缩短与内容对齐问题

嘿，这个需求我之前也折腾过！完全不用写额外CSS，只用Bootstrap 4的内置类就能搞定，核心思路是把边框从card-footer本身转移到内部容器上，具体操作如下：

• 第一步：给card-footer添加border-0类，移除它默认的全宽顶部边框
• 第二步：在card-footer里面嵌套一个div容器，给这个容器加上这几个类：
  • border-top：添加上边框，这就是我们要的缩短版边框
  • mx-3：给容器左右添加margin，让边框长度比卡片宽度短
  • py-3：保持和原card-footer一致的垂直内边距，避免内容间距混乱

这样操作后，card-footer本身没有左右边距，内部容器的内容会和card-body的内容完全对齐，同时边框只显示在内部容器的宽度范围内，完美解决你的问题！

完整代码示例 #

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer border-0">
    <div class="border-top mx-3 py-3">
      Footer content aligned with body
    </div>
  </div>
</div>

要是你想调整边框的缩短幅度，只需要修改mx-*的数值就行，比如mx-2、mx-4，Bootstrap的间距类都是预设好的，灵活得很~

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