bootstrap 4 的 .col-* 类不支持真正的跨列，仅通过断点类组合实现视觉“跨列”效果；嵌套列必须用 .row 包裹子列以避免溢出；复杂跨列需求应改用 css grid。
跨列合并不是靠CSS类直接实现的
Bootstrap 4 的 .col-* 类本身不支持“跨列”语义（比如类似 HTML 表格的 colspan），它只定义列在 12 栅格中的**占比宽度**。所谓“跨列效果”，实际是通过组合不同断点下的列宽、嵌套或辅助类达成的视觉结果，而非真正的 CSS Grid 式跨列。
用 col-*- 类组合模拟跨列布局
常见需求如“左侧主内容占 8 列，右侧边栏占 4 列；小屏时边栏下沉”，本质是利用断点类控制不同设备下的宽度分配，而不是单个元素跨多列：
-
.col-md-8+.col-md-4：中屏及以上，两列并排，合计 12 列 -
.col-sm-12+.col-sm-12：小屏时各自独占整行，实现“下沉” - 不能写成
.col-md-12然后内部再划分子区域——那只是嵌套，不是跨列
错误示例：<div class="col-md-12">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div> —— 这里内层 .col-md-6 宽度基于父 .col-md-12 计算，不是基于最外层 .row，容易导致嵌套溢出（见下一点）。
嵌套时必须用 .row 包裹子列，否则会撑出父容器
这是最容易踩的坑：Bootstrap 的 .row 有 margin-left: -15px 和 margin-right: -15px，而 .col-* 有 padding-left: 15px 和 padding-right: 15px，两者抵消才能保证内容对齐。一旦在 .col-* 内部漏掉 .row，子列的负外边距就没了约束，直接突破父列边界。
- ✅ 正确：
<div class="col-md-8"><div class="row"> <div class="col-md-6">左</div> <div class="col-md-6">右</div> </div></div> - ❌ 错误：
<div class="col-md-8"> <div class="col-md-6">左</div> <div class="col-md-6">右</div> </div>→ 水平滚动条、右侧截断 - 注意：
.row必须是.col-*的**直接子元素**，不能跳级
真正需要跨列时，该换 CSS Grid 而不是硬套 Bootstrap
当你要实现杂志式布局、仪表盘中某个卡片横跨 2 行 3 列、或动态自适应列数时，Bootstrap 4 的 12 列线性模型已到极限。它的 Flexbox 基础决定了它只有“行内分布”能力，没有二维坐标控制。
- 例如：
grid-column: 1 / -1让一个 item 横跨整行，或grid-area: header配合grid-template-areas—— 这些在 Bootstrap 4 里无法原生表达 - 混合方案可行：
<div class="container"><div class="row"><div class="col-lg-8"><div class="dashboard-grid">...</div></div></div></div>，其中.dashboard-grid是你手写的 CSS Grid 区域 - 别试图用
.offset-*或.order-*模拟跨列——它们解决的是偏移和排序，不是空间占据关系
复杂点在于：跨列不是“加个 class 就行”，而是要判断布局维度是否超出一维范畴；容易被忽略的是，嵌套层级越深，.col-* 的百分比计算越容易脱离直觉——它永远只相对于直接父 .row，而不是视觉上的“整个页面”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
