bootstrap 5 默认网格系统基于 12 列，`col` 类会均分剩余空间，无法保证固定数量列始终同行；使用 `col-1` 可强制每列占 1/12 宽度（≈8.33%），10 列即可紧凑排列于一行，同时保持基础响应性。
在 Bootstrap 5 中，若希望在同一行内稳定显示 10 个等宽列（例如用于仪表盘卡片、图标导航或数据指标栏），直接使用 <div class="col"> 是不可行的——因为 col 是“弹性列”，其宽度由父容器剩余空间动态分配，且受 Bootstrap 的断点最小宽度限制（如 col 在小屏下可能自动换行）。而用户截图中出现的“第 6 列后换行”现象，正是由于默认 col 在视口宽度不足时触发了响应式回退行为。
✅ 正确解法：使用 col-1（而非 col）
col-1 表示“在所有断点（xs 及以上）下，该列固定占据网格系统的 1/12 宽度”。10 个 col-1 总共占用 10/12 ≈ 83.3% 的行宽，留有合理间隙，且不会因屏幕变窄而自动折行——这正是实现“单行 10 列”的关键。
? 示例代码（精简版，含 10 列卡片）：
<div class="row g-2"> <!-- g-2 提供列间间距，推荐替代默认 margin -->
<div class="col-1">
<div class="card h-100">
<div class="card-body p-2">
<h6 class="card-title mb-1">指标 A</h6>
<p class="card-text small mb-0">12,450</p>
</div>
</div>
</div>
<!-- 重复 9 次（此处省略） -->
<div class="col-1">
<div class="card h-100">
<div class="card-body p-2">
<h6 class="card-title mb-1">指标 J</h6>
<p class="card-text small mb-0">987</p>
</div>
</div>
</div>
</div>⚠️ 注意事项：
- 不要混用 col 和 col-1：col 无固定宽度语义，与 col-1 同行会导致布局错乱；
- 响应式增强建议：若需在极小屏（如手机竖屏）下自动转为多行，可搭配断点类，例如 col-1 col-sm-2 col-md-1 —— 但注意：col-1 本身已作用于 xs（≥0px），添加 col-sm-2 反而会在 sm 断点扩大为 2/12，破坏 10 列布局。如需真响应式，应改用 col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1 等阶梯式类，但此时列数将随屏幕增大而增加，非本例需求；
- 内容溢出处理：10 列紧凑排列时，卡片内文字或图标易换行或截断。建议为 .card 添加 h-100，.card-body 使用 p-2 缩小内边距，并对标题/文本应用 text-truncate 或 small 类控制字号；
- 性能提示：10 个独立 col-1 是语义清晰且高效的方案，无需 CSS 覆盖或 Flex 自定义——完全遵循 Bootstrap 原生网格逻辑。
✅ 总结：col-1 是 Bootstrap 5 中实现「固定数量等宽列单行显示」的标准、轻量、可维护的解决方案。它牺牲了“完全填满 100% 宽度”的视觉诉求，换取了布局稳定性与跨设备一致性——这正是专业前端在平衡灵活性与可控性时的典型取舍。
