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，视觉上列就“缩进又缩进”。遇到布局偏移，先查这两处。
