本文详解如何使用 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）。
以下是优化后的标准实现：
<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">
<img src="https://placehold.co/600x400/4e73df/ffffff?text=Medicine"
class="card-img-top object-fit-cover"
alt="Internal/Family Medicine"
height="180">
<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">
<img src="https://placehold.co/600x400/2ecc71/ffffff?text=Pulmonology"
class="card-img-top object-fit-cover"
alt="Pulmonology"
height="180">
<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">
<img src="https://placehold.co/600x400/e74c3c/ffffff?text=Gastro"
class="card-img-top object-fit-cover"
alt="Gastroenterology"
height="180">
<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">
<img src="https://placehold.co/600x400/9b59b6/ffffff?text=Dentistry"
class="card-img-top object-fit-cover"
alt="Dentistry"
height="180">
<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。
通过合理组合断点类与现代工具类，即可实现简洁、健壮、易扩展的响应式卡片布局。
