如何在 Bootstrap 5 中实现单行 10 列响应式布局
bootstrap 5 默认网格系统基于 12 列，`col` 类会均分剩余空间，无法保证固定数量列始终同行；使用 `col-1` 可强制每列占 1/12 宽度（≈8.33%），10 列即可紧凑排列于一行，同时保持基础响应性。
在 Bootstrap 5 中，若希望在同一行内稳定显示 10 个等宽列（例如用于仪表盘卡片、图标导航或数据指标栏），直接使用
是不可行的——因为 col 是“弹性列”，其宽度由父容器剩余空间动态分配，且受 Bootstrap 的断点最小宽度限制（如 col 在小屏下可能自动换行）。而用户截图中出现的“第 6 列后换行”现象，正是由于默认 col 在视口宽度不足时触发了响应式回退行为。✅ 正确解法：使用 col-1（而非 col）
col-1 表示“在所有断点（xs 及以上）下，该列固定占据网格系统的 1/12 宽度”。10 个 col-1 总共占用 10/12 ≈ 83.3% 的行宽，留有合理间隙，
? 示例代码（精简版，含 10 列卡片）：
指标 A
12,450
指标 J
987
⚠️ 注意事项：
- 不要混用 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% 宽度”的视觉诉求，换取了布局稳定性与跨设备一致性——这正是专业前端在平衡灵活性与可控性时的典型取舍。
