本文详解如何使用 bootstrap 5 的栅格系统，在桌面端单行展示 10 个等宽列（如卡片），同时兼顾基础响应性——通过 `col-1` 类精准控制列宽，并规避默认 `col` 的自动换行与宽度塌缩问题。
在 Bootstrap 5 中，标准的 .col 类会将可用空间均分给所有子列（例如 10 个 .col 会各占约 10% 宽度），看似合理，但实际中常因内容撑开、内边距、卡片阴影或浏览器渲染微小差异导致换行——尤其当列数 ≥6 时，极易触发折行，破坏单行布局。
根本原因在于：.col 是“弹性自适应”类，它依赖 flex-grow: 1 实现等分，但未强制设定最大宽度上限；而 Bootstrap 的栅格系统基于 12 列网格，col-1 才是真正代表「1/12 宽度」的语义化单位。因此，要稳定实现单行 10 列，应使用 col-1（即每列固定为视口宽度的 1/12 ≈ 8.33%），10 列总宽度 ≈ 83.3%，留有余量防止溢出，且天然保持水平排列。
✅ 正确做法：全部使用 col-1
<div class="row g-2"> <!-- 建议添加 g-2 控制列间距 -->
<div class="col-1">
<div class="card h-100">
<div class="card-body p-2">
<h5 class="card-title fs-6 mb-1">TITRE</h5>
<p class="card-text fs-7 mb-1">TEXT</p>
<p class="card-text fs-7 text-muted">text</p>
</div>
</div>
</div>
<!-- 重复 9 次（共 10 列） -->
</div>⚠️ 注意事项：
- 响应性取舍：col-1 在所有断点下均生效（即 xs 起就固定为 1 列宽度），若需在小屏（如手机）堆叠显示，应改用响应式类，例如 col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1——这样在 xl 及以上屏幕才启用 10 列单行，中小屏自动降级为多行布局；
- 内容适配：确保卡片内容简洁、字体尺寸合理（推荐 fs-6/fs-7）、内边距精简（p-2 替代默认 p-3），避免内容溢出挤压列宽；
- 高度统一：为防止因内容高度不一导致行高错乱，建议为卡片添加 h-100 并配合 d-flex flex-column 结构；
- 性能提示：10 列 DOM 节点较多，若数据动态生成，建议结合虚拟滚动或分页优化长列表场景。
总结：Bootstrap 5 的 col-1 是实现高密度单行栅格的可靠选择。它放弃“完全流式响应”，换取布局确定性——这正是仪表盘、指标看板、图标导航等场景的核心需求。灵活搭配响应式断点类，即可在可控性与适应性之间取得最佳平衡。
