col-6 仅在超小屏（xs）生效，其他断点无定义，故手机上可能勉强占半宽，但平板及桌面端列宽失控；要全设备占一半，须显式声明各断点如 col-6 col-sm-6 或用 row-cols-2。
col-6 默认只在超小屏（xs）生效，不写断点前缀不会自动适配所有尺寸——直接写 col-6，手机上就真只占一半，文案挤、按钮小、体验崩。
为什么 col-6 在手机上看不是“一半屏幕”？
Bootstrap 5 的 col-* 中的 - 后面没字母，就代表「超小屏断点」（xs，即 min-width: 0）。它只控制 xs 层级行为，其他尺寸（sm/md/lg/xl）完全没定义，浏览器按普通块元素渲染，宽度由内容撑开，不是你想要的“始终一半”。
- 错误认知：
col-6= “所有屏幕都占 6/12” → 实际是“仅 xs 下占 6/12，其余断点无约束” - 真实表现：手机上可能勉强占半宽，但平板或桌面端列宽失控，甚至堆成一列或溢出
- 查证方法：打开 DevTools → Toggle device toolbar → 切换不同宽度，看元素 class 是否被激活（别信“看起来像”）
要“所有设备都占一半”，得显式覆盖全部断点
Bootstrap 不提供“全局生效”的单个类，必须明确告诉每个断点怎么排。最稳妥写法是：
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">内容</div>
但更常用的是缩写方案：
-
col-6 col-sm-6：从 xs 起就占半宽，sm 及以上自动继承（Bootstrap 断点是“最小宽度”逻辑，sm 生效后 md/lg/xl 都沿用） - 别用
col-md-6单独写：xs/sm 下无定义，列宽不可控 - 如果卡片内容简单（如纯文字按钮），
col-6确实能凑合；但带图片、标题、摘要的卡片，强烈建议至少加col-sm-6
嵌套时 col-6 必须包在 row 里，否则 flex 失效
常见错位原因不是 class 写错，而是结构非法。Bootstrap 的栅格依赖 flex 容器行为，而 row 才是那个 flex 容器。
- ✅ 正确：
<div class="row"> <div class="col-6 col-sm-6">A</div> <div class="col-6 col-sm-6">B</div> </div> - ❌ 错误：
<div class="col-6 col-sm-6">A</div> <div class="col-6 col-sm-6">B</div>（脱离row，列变成普通 div，width 失效、换行异常） - 嵌套场景下，子
col必须放在父col内的row里，不能跳级
替代方案：不用 col-6，改用 col + row-cols-2
如果目标只是“每行固定两个等宽项”，且不care具体栅格占比（比如文章列表、图标网格），比硬塞 col-6 更稳：
<div class="row row-cols-2 row-cols-md-3"> → 所有设备每行 2 个，中屏起每行 3 个 <li> <code>row-cols-*是基于 flex 的行级控制，无视子元素内部高度差异，避免因卡片高度不一致导致的错位- 此时子项用
<div class="col"> 即可，它会均分剩余空间，比 <code>col-6更鲁棒真正难的不是写对 class，而是想清楚：你要的是“严格 6 列宽”，还是“视觉上两栏并列”？前者抠断点，后者用
row-cols-*更省心。别让栅格系统替你做设计决策。
