.col-6 仅在超小屏生效，其他断点无定义，故手机上可能勉强占半宽，而平板及桌面端列宽失控；要全设备占一半，须显式声明各断点如 col-6 col-sm-6 或用 row-cols-2。
直接用 .col-xxl-2 + .col-sm-6 组合就能实现，但必须注意断点优先级和列数总和是否溢出 12 —— 这是多数人写完发现“六列没生效”或“手机端错位”的根本原因。
为什么 .col-xxl-2 在超大屏只显示五列甚至四列？
因为 .col-xxl-2 表示“在 ≥1400px（xxl 断点）时占 2/12 宽度”，6 × 2 = 12，理论上刚好铺满。但实际常出问题：
- 漏写了
.col-sm-6或其他基础断点类，导致小屏下退化为默认行为（.col等宽分配，可能超出 12 列） - 父级
.row外没套.container或.container-fluid，负 margin 被截断，列间距异常 - 用了旧版前缀如
.col-xl-2（≥1200px），但误以为它覆盖 xxl 屏；xxl是独立断点（≥1400px），xl不会自动继承
.col-sm-6 和 .col-xxl-2 能共存吗？怎么写才不冲突？
能共存，Bootstrap 类名按断点从高到低覆盖，但写法有严格顺序要求：
- 必须把更细粒度的断点类（如
.col-xxl-2）写在后面，否则会被前面的.col-sm-6覆盖 - 正确写法：
class="col-sm-6 col-xxl-2"—— 小屏占 6 列，超大屏收缩为 2 列 - 不能写成
class="col-xxl-2 col-sm-6"，否则sm类在 CSS 中权重相同但位置靠前，xxl可能被忽略（尤其在未启用完整 Sass 编译时） - 6 个元素都加这个 class，整行就是：小屏每行 2 个（6 ÷ 3 = 2 行），超大屏每行 6 个（1 行）
手机端显示两列，但实际只看到一列？
这不是样式没生效，而是你用的是 .col-xs-6 或 .col-6 这类写法：
-
.col-6是“所有尺寸下都占一半”，包括手机屏 —— 它没错，但你要的是“手机屏显示两列”，即每列占 50%，所以.col-6正确；若只看到一列，大概率是父级.row没撑开，检查是否遗漏.container -
.col-xs-6是 Bootstrap 3 写法，Bootstrap 4/5 已移除xs前缀，写它等于无效 - 真要严格限定“仅手机屏两列、平板起变为其他布局”，得用
.col-6 .col-sm-4 .col-md-3 .col-xxl-2这种逐级收窄链，但务必确认各断点列数总和始终 ≤12
嵌套六列时，.row 必须加 g-0 吗？
不一定，但默认 .row 的 gutter（g-3）会让六列在 xxl 下挤不下 —— 12 列宽度 + 5 个间隙（每间隙 1.5rem），很容易横向溢出滚动条。
- 保留间隙：用
.g-xxl-2（仅超大屏减小间隙）或.gx-xxl-2（仅水平方向） - 彻底去间隙：加
g-0，但需手动给列加px-2之类补内边距，否则内容贴边难看 - 最稳妥做法：用
.row-cols-xxl-6替代单个列类，它是 Bootstrap 5.3+ 提供的语义化工具类，自动处理列数 + 间隙 + flex 换行逻辑，比手写 6 个.col-xxl-2更可靠
真正卡住人的从来不是“怎么写六列”，而是没意识到 xxl 断点需要显式启用（某些 CDN 版本默认裁剪了 xxl 规则）、以及小屏两列时 row 高度塌陷导致内容重叠 —— 这时候加 h-auto 或 min-height: 1px 比调 align-items 更快见效。
