<p>嵌套列必须用 .row 包裹，否则栅格失效；子列总和≤12，超则换行；需手动加 mt-/mb- 类补垂直间距；每层须独立声明响应式类。</p>
嵌套时必须加 .row，否则列会错位或溢出
在 .col-* 里直接放另一个 .col-*，浏览器不会识别为栅格子项——它只是普通块元素，宽度、浮动、边距全乱。bootstrap 的栅格逻辑强制要求：**任何嵌套列必须包裹在自己的 .row 里**，否则负外边距（margin: 0 -15px）和内边距（padding: 0 15px）无法配对抵消，内容就会撑破父容器或贴边。
常见错误现象：
- 右侧卡片文字紧贴父列右边缘，甚至被截断
- 两行子列视觉上“粘”在一起，没间距
- 小屏下整块区域横向滚动（因 overflow-x: hidden 未生效）
正确做法：
<div class="col-md-8">
<div class="row"> <!-- 关键！必须加这一层 -->
<div class="col-md-6">左半子模块</div>
<div class="col-md-6">右半子模块</div>
</div>
</div>
.col-* 子列总和必须 ≤12，超了就自动换行
Bootstrap 不校验你写的列宽加起来是不是 12，但它按规则处理：同一 .row 下所有 .col-* 的数字相加若超过 12，超出部分会整体掉到下一行——不是微调缩放，是硬换行。这在嵌套里特别容易踩坑，因为父列本身已占空间，人眼容易误判剩余容量。
使用场景：比如父列是 .col-lg-9，你想在里面放三个等宽子列，别写 .col-lg-4×3（=12），那没问题；但如果写成 .col-lg-5 + .col-lg-5 + .col-lg-3（=13），第三个就会独占一行，破坏对齐。
实操建议：
- 优先用能整除 12 的组合：如
.col-3×4、.col-4×3、.col-6×2 - 需要五列？不能直接用
.col-2.4——Bootstrap 原生无此类，得自定义 CSS 或改用flex布局 - 调试时打开浏览器开发者工具，看实际渲染的
width和float，比数 class 更可靠
嵌套后垂直间距丢失，得手动加 mt-* 或 mb-*
Bootstrap 的 .row 只管水平布局，不提供行间垂直间隔。嵌套的多个 .row 默认上下紧贴，卡片、表单组、文本块之间没呼吸感，看起来像糊在一起。
性能/兼容性影响：加 mt-2 这类间距工具类几乎零成本，但若用 margin-top: 1rem 写在自定义样式里，可能和某些组件的 margin collapse 冲突；用 Bootstrap 工具类更稳妥。
示例对比：
<div class="col-md-4">
<div class="row">
<div class="col-12 mt-2"><p>卡片1</p></div>
<div class="col-12 mt-2"><p>卡片2</p></div>
</div>
</div>注意：mt-2 加在子列上，不是加在 .row 上——后者会导致整行下移，影响对齐。
响应式断点要同步考虑，嵌套层不能只写一个尺寸
很多人给父列写 .col-md-8，子列却只写 .col-6，结果小屏下子列仍强行占一半宽度，挤得看不清。嵌套不是“继承”父级断点，每一层都要独立声明适配规则。
参数差异：
-
.col-6：超小屏（ -
.col-md-6：仅中屏及以上（≥992px）才按 6 列宽度，小屏会堆叠成 100% - 嵌套时推荐显式写全，比如
.col-sm-6 .col-md-4 .col-lg-3，避免意外堆叠
容易被忽略的地方：嵌套层级越深，断点管理越容易漏。建议把每层的最小生效尺寸写在注释里，例如：
<!-- 父列：md 起分栏 -->
<div class="col-md-8">
<!-- 子行：sm 起分栏 -->
<div class="row">
<div class="col-sm-6 col-lg-4">…</div>
</div>
</div>嵌套不是套娃游戏，是分层责任——每层 .row 都得自己扛好断点和宽度，没人替你兜底。
