Bootstrap 5栅格系统布局详析

Bootstrap 5 的 col“不生效”主因是容器结构断层，必须严格遵循 container → row → col 三层嵌套；缺 container 导致 row 负边距失效，缺 row 则列宽不计算。

为什么 Bootstrap 5 的 col 在页面上“不生效”？

绝大多数时候，不是栅格写错了，而是容器结构断层了——container → row → col 这三层嵌套缺一不可。

• container 或 container-fluid 必须最外层，它提供水平居中或全宽基底；漏掉它，row 的负边距会把列顶出视口左/右边界
• row 必须直接包在 container 里，且它的子元素只能是 col 类；如果往 row 里塞 div、p 或文本，负 margin 失效，列会塌陷、错位甚至换行异常
• 常见错误写法：<div class="container"><div class="col-6">内容</div></div>——中间少了 row，列宽完全不计算

col-1 能不能用来做 10 列并排？

能，而且是最推荐的做法。别被“12 列系统”误导：它只是比例基准，不是硬性上限。

• col-1 表示“永远占 1/12 宽度”，10 个就是 10/12 ≈ 83.3%，留有余量防边距溢出，天然响应式（所有屏幕都生效）
• 别用 col（无后缀），它是弹性等分模式，10 个 col 会因内容撑开、换行或渲染抖动导致单行失败
• 务必搭配 g-2（或 g-1/g-0）控制列间距；默认 row 的 gutter 是 1rem，太大会让 10 列撑满甚至换行

小屏幕下怎么让 10 列自动堆叠成 1 列？

靠断点类组合，而不是删代码或加 JS。核心是“覆盖式声明”：越靠后的类优先级越高，且只在对应断点触发。

• 写法示例：class="col-12 col-sm-6 col-md-4 col-lg-2" —— 手机占满整行，平板每行 2 个，中屏每行 3 个，大屏每行 6 个
• 要实现“小屏堆叠、大屏 10 列”，就用：class="col-12 col-xl-1"（xl ≥1200px 时生效，col-12 在手机强制单列）
• 注意：col-* 是超小屏（xs）断点，Bootstrap 5 已移除 col-xs-，写错前缀等于没写

卡片内容在 col-1 里挤成一团怎么办？

不是栅格有问题，是内边距和字体尺寸没压缩。小列宽度有限，必须主动精简视觉体积。

• 卡片用 h-100 拉高，避免高度塌缩；内部用 p-2（不是 p-3）控内边距
• 标题用 h6 + mb-1，正文统一加 small 和 mb-0，禁用默认段落上下边距
• 避免给 col 设固定 width 或 min-width，这会破坏响应式行为，也干扰 Flexbox 自动对齐

实际项目里最容易被忽略的，是 g-* 间距类和 container 的 padding 冲突——比如把 row g-2 塞进 container p-4，视觉上列就“缩进又缩进”。遇到布局偏移，先查这两处。