本文详解如何使用 bootstrap 网格系统精准控制卡片在不同断点下的列数分布，重点解决小屏幕（sm）每行显示 2 张卡片、中等及以上屏幕每行显示 4 张卡片的响应式需求，并提供语义清晰、可维护性强的最佳实践代码。

本文详解如何使用 bootstrap 网格系统精准控制卡片在不同断点下的列数分布，重点解决小屏幕（sm）每行显示 2 张卡片、中等及以上屏幕每行显示 4 张卡片的响应式需求，并提供语义清晰、可维护性强的最佳实践代码。

在构建响应式卡片网格时，关键在于理解 Bootstrap 的栅格断点逻辑与列宽计算原理。Bootstrap 默认采用 12 列栅格系统，因此：

• 每行显示 4 张卡片 → 每张卡片占 12 ÷ 4 = 3 列 → 应使用 col-md-3（而非原文中的 col-md-2，后者会导致每行 6 张）；
• 小屏幕（≥576px）每行显示 2 张 → 每张占 12 ÷ 2 = 6 列 → 使用 col-sm-6；
• 若需在超小屏（col-6（覆盖所有断点）；若希望超小屏单列堆叠，则保留 col-sm-6 即可（xs 断点无类名时默认为 col-12）。

以下是优化后的标准实现：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><div class="container-fluid">
  <div class="row g-3"> <!-- 使用 g-3 替代 mt-3，实现统一、响应式间距 -->
    <div class="col-md-3 col-sm-6">
      <div class="card h-100 border-0 shadow-sm">
        @@##@@
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-0">Internal/Family Medicine</h5>
          <div class="mt-auto"></div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100 border-0 shadow-sm">
        @@##@@
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-0">Pulmonology</h5>
          <div class="mt-auto"></div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100 border-0 shadow-sm">
        @@##@@
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-0">Gastroenterology</h5>
          <div class="mt-auto"></div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100 border-0 shadow-sm">
        @@##@@
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-0">Dentistry</h5>
          <div class="mt-auto"></div>
        </div>
      </div>
    </div>
  </div>
</div>

关键优化说明：
✅ 语义化容器：使用 container-fluid 确保全宽布局，避免父容器溢出；若需留白，可替换为 container。
✅ 间距统一：g-3（gap）替代分散的 mt-3，使行列间距一致且响应式生效。
✅ 卡片高度对齐：添加 h-100 与 d-flex flex-column + mt-auto，确保标题底部对齐，提升视觉一致性。
✅ 图片规范处理：移除内联 style="max-width:100%"，改用 Bootstrap 工具类 object-fit-cover 和固定 height，保障缩略图比例与渲染性能。
⚠️ 注意：col-md-3 col-sm-6 组合在 md（≥768px）及以上生效 col-md-3，在 sm（≥576px）生效 col-sm-6，而 xs（col-12（单列），如需 xs 也双列，请用 col-6。

通过合理组合断点类与现代工具类，即可实现简洁、健壮、易扩展的响应式卡片布局。