Bootstrap 5 实现单行 10 列响应式布局的正确方法

在 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 在所有断点生效）。

✅ 正确实现代码（精简优化版）：

 
  
  
    
      
        
TITRE
        
TEXT
        
tex
t

      
    
  
  

? 注意事项与增强建议：

• 移除默认 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 列同排目标。