在 bootstrap 5 中，要让 10 个卡片并排显示在同一行且保持响应式，需使用固定宽度列类（如 `col-1`），而非弹性 `col`；同时需确保父容器为 `row`、无额外间距干扰，并在小屏幕下合理降级。
Bootstrap 5 的栅格系统基于 12 列，但*`col-类（如col-1）并非强制“最多 12 列”限制**——它表示“在所有断点下占据 1/12 宽度”，因此 10 个col-1` 共占 10/12 ≈ 83.3% 宽度，完全可并排显示于一行，且默认具备响应式行为（即在所有屏幕尺寸下均按 1 列宽度渲染）。
⚠️ 关键误区澄清：
- ❌ class="col" 是等分剩余空间的弹性列，不指定具体占比，10 个 col 会因内容撑开、换行或溢出而无法稳定单行显示；
- ✅ class="col-1" 是固定比例列（1/12 宽度），10 个即占满 10/12，留有余量防边距溢出，且天然响应式（因 col-1 在所有断点生效）。
✅ 正确实现代码（精简优化版）：
<div class="row g-2"> <!-- 使用 g-2 控制列间间隙，避免 margin 导致换行 -->
<!-- 循环 10 次 -->
<div class="col-1">
<div class="card h-100 border-primary">
<div class="card-body p-2">
<h6 class="card-title mb-1">TITRE</h6>
<p class="card-text small mb-0">TEXT</p>
<p class="card-text small text-muted mb-0">text</p>
</div>
</div>
</div>
<!-- ... 重复 9 次（此处省略） -->
</div>? 注意事项与增强建议：
-
移除默认 row 的负边距干扰：确保 外层无 container 或 container-fluid 的 padding 冲突，推荐直接置于 body 或 container-fluid 内；
- 控制内边距与字体大小：小列内容易拥挤，建议用 p-2、small、mb-0 等工具类压缩卡片内边距和文字尺寸；
- 响应式降级方案（推荐）：若需在移动端自动堆叠，改用断点类，例如
—— 在小屏（- 性能提示：10 个独立 col-1 是语义清晰、浏览器渲染高效的做法；避免滥用 flex-nowrap + overflow-x-auto 滚动方案，那会牺牲可访问性与 SEO 友好性。
总结：col-1 是实现单行多列布局的基石类，它既保证比例精确，又继承 Bootstrap 全断点响应能力。只需搭配 g-* 间距控制与紧凑的卡片样式，即可优雅达成 10 列同排目标。
