Bootstrap 5 栅格系统：别再让 col “失效”
先说结论：绝大多数情况下，并不是栅格代码写错了，而是容器结构出现了“断层”。 container → row → col 这三层嵌套必须完整，缺少任何一层都会导致布局失效。
为什么 Bootstrap 5 的 col 在页面上“不起作用”？
归根结底一句话：不是栅格代码写错了，而是容器层级出现了断裂——container → row → col 这三层嵌套缺一不可。实际开发中，最常见的错误就出在这里。
container或container-fluid必须是最外层容器，它负责提供水平居中或全宽的基础。漏掉它，row的负外边距会把列推到视口之外。row必须直接包裹在container内部，并且它的子元素只能是col类。如果在row中放入一个div、p或纯文本，负外边距就会失效，导致列塌陷、错位甚至换行。- 一个典型的错误写法：
内容
row，列宽度根本不会计算。
col-1 能做到 10 列并排吗？
可以，完全能够实现。而且我推荐这种做法。不要被“12 列系统”这个说法误导——它只是一个比例基准，并非硬性限制。
col-1的含义是“永远占 1/12 宽度”。10 个col-1加起来就是 10/12 ≈ 83.3%，留出一点余量防止边距溢出，天然就具备响应式特性。- 不要使用不带数字的
col，那是弹性等分模式。10 个col很容易因为内容撑开、换行或渲染抖动导致单行失败。 - 务必搭配
g-2（或g-1/g-0）来控制列间距。默认row的gutter是 1rem，间距太大，10 列很容易被撑满甚至换行。
小屏幕下堆叠成一行？靠断点类组合
想在移动设备上自动堆叠成一行？通过断点类组合即可实现。不需要删除代码，也不需要编写 JavaScript。核心思路是“覆盖式声明”：后写的类优先级更高，并且只在对应断点生效。
- 一个典型的写法是：
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 中，视觉上列就会产生“缩进又缩进”的效果。遇到布局偏移，第一个要检查的就是这两个地方。
