如何用Bootstrap实现图片卡片覆盖卡片顶部边框（无需自定义CSS）

我希望仅使用Bootstrap实现图片覆盖卡片顶部边框的效果，不使用自定义CSS。

我曾尝试使用以下内联样式：

style="margin: -50px 70px;"

但现在希望仅通过Bootstrap完成该需求。

实现方案 #

可以直接借助Bootstrap自带的工具类来实现，无需自定义CSS，示例代码如下：

<div class="card mx-auto mt-5" style="max-width: 500px;">
  <!-- 图片：用负边距实现向上偏移覆盖顶部，搭配居中类控制水平位置 -->
  <img src="你的图片地址" class="img-fluid mt-n5 mx-auto d-block w-80" alt="卡片图片">
  <!-- 卡片内容：调整顶部内边距避免和图片重叠 -->
  <div class="card-body pt-4">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这里是卡片内容区域，通过工具类组合就能实现图片覆盖顶部边框的效果。</p>
  </div>
</div>

关键工具类说明：

• mt-n5：给图片设置负上边距（n5对应margin-top: -3rem，可根据需求选择n1至n5调整偏移幅度），让图片向上覆盖卡片顶部边框
• mx-auto d-block：实现图片水平居中
• w-80：控制图片宽度（Bootstrap提供w-25至w-100等宽度类，也可用mx-*类调整左右留白）
• pt-4：给卡片内容增加顶部内边距，避免图片和内容重叠

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