Bootstrap卡片在小屏幕设备上重叠的问题排查求助

问题描述 #

3个Bootstrap卡片在大屏幕能正常并排显示，但中等屏幕开始出现重叠，小屏幕完全挤在一起。调整列的响应式类（比如把col-md-4改成col-md-3、col-sm-2改成col-sm-3）都没用，检查后发现卡片在小设备上实际尺寸根本没缩小，只是互相重叠。

问题根源 #

1. 卡片固定宽度坑：你给卡片加了style="width: 18rem;"的固定宽度，当父列的宽度小于18rem时，卡片直接超出父容器，自然就重叠了。
2. 自定义媒体查询冲突：你写的@media only screen and (max-width: 912px)规则，强制所有col-*类宽度为33%，直接覆盖了Bootstrap本身的响应式列逻辑，而且没处理卡片的自适应宽度问题。

解决方案 #

核心修改点 #

1. 去掉卡片固定宽度：把卡片的style="width: 18rem;"换成Bootstrap的w-100类，让卡片宽度自适应父列的宽度。
2. 用标准响应式列类：调整列的类，确保不同屏幕尺寸下布局合理：
   • 大屏幕（lg）：col-lg-4（3列平分）
   • 中等屏幕（md）：col-md-6（2列排列）
   • 小屏幕及以下：col-12（1列堆叠）
3. 删掉冲突的自定义媒体查询：别强制col-*的宽度，让Bootstrap自己处理响应式布局。

修改后的完整代码 #

CSS代码

body {
  background-color: #EDEFEE;
  font-family: 'Markazi Text', serif;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 5%;
  margin-right: 5%;
}

.container {
  background-color: lightpink;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

HTML代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

<main>
  <div class="container">
    <div class="row g-4"> <!-- 加g-4增加列间距，避免卡片紧贴 -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="card center h-100"> <!-- h-100让卡片高度一致 -->
          <img src="assets/img/ragout.jpg" class="card-img-top" alt="炖菜图片" style="height: 245px; object-fit: cover;"> <!-- object-fit避免图片拉伸变形 -->
          <div class="card-body">
            <h2 class="card-title bg-warning text-danger">土豆炖牛肉<span class="badge bg-primary">New</span></h2>
            <p class="card-text">土豆搭配牛肉和胡萝卜炖煮而成。</p>
            <a href="#" class="btn btn-primary">了解更多</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-12">
        <div class="card center h-100">
          <img src="assets/img/table.jpg" class="card-img-top" alt="预订餐桌图片" style="height: 245px; object-fit: cover;">
          <div class="card-body">
            <h2 class="card-title">预订餐桌</h2>
            <p class="card-text">在线预订您的专属餐桌，享受美味餐食。</p>
            <a href="#" class="btn btn-primary">立即预订</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-12">
        <div class="card center h-100">
          <img src="assets/img/open.jpg" class="card-img-top" alt="营业时间图片" style="height: 245px; object-fit: cover;">
          <div class="card-body">
            <h2 class="card-title">营业时间</h2>
            <p class="card-text">查看我们的营业时间，随时光临品尝美食。</p>
            <a href="#" class="btn btn-primary">查看详情</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

额外优化说明 #

• 加object-fit: cover是为了让固定高度的图片保持比例，不会拉伸变形；
• 用h-100可以让所有卡片高度一致，视觉上更整齐；
• row类加g-4是增加列之间的间距，避免卡片挤在一起，提升美观度。

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