必须用 .row 包裹子 .col，否则栅格失效；嵌套时子列总和≤12，推荐 .col-3×4、.col-4×3 或 .col-6×2；需加 mt-2、gx-4 控制间距；禁用自定义 padding/margin 和 inline-block。
嵌套必须用 .row 包裹子 .col，否则列宽和换行全乱
直接在
里写另一个
，浏览器不会识别为栅格项——它只是普通块元素，
、
、
全失效。Bootstrap 的栅格逻辑依赖
提供的
和
的
成对抵消，缺一层
，内容就会撑破父列或贴边。
常见错误现象：
右侧卡片文字紧贴父列右边缘，甚至被截断
小屏下整块区域横向滚动（
失效）
第二行卡片高度不一致，网格流断裂
正确做法是：每个
内部如需多列，必须先加一层
，再放子
。比如
。
子列总和必须 ≤12，超了就自动换行，但人眼容易误判剩余空间
嵌套时，子列宽度加起来不能超过 12，否则会强制换行——这在父列已占空间的前提下特别隐蔽。例如外层是
，你可能下意识觉得“还能塞 4 列”，但实际子网格仍按 12 列基准计算，
才能单行排满。
推荐组合（避免留白/错位）：
× 4（适合 4 卡/行）
× 3（适合 3 卡/行）
× 2（适合双栏并列）
别用
× 3 = 9 这种组合，剩下 3 列空白会导致右侧不对齐，尤其在响应式断点切换时更明显。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
嵌套的 .row 默认无垂直间距，卡片/文本块糊在一起
多个
上下紧贴，没有呼吸感。手动写
容易和其它组件的 margin collapse 冲突；Bootstrap 工具类更稳妥。
实操建议：
用
（
）、
控制卡片间距
水平间隙统一用
（
），比改
更干净
若需彻底去间隙，用
，别碰
性能和兼容性：工具类优先，避免自定义 margin/padding 覆盖栅格基线
Bootstrap 的栅格系统靠
的负外边距和
的内边距配合工作。一旦你在
上写
或
，整个嵌套结构的对齐、换行、响应行为都可能异常。
真正影响兼容性的点：
在
上加
→ 破坏 flex 布局
用
但没限制内部内容宽度 → 小屏溢出
只写
没配
→ 小屏堆叠失败
最常被忽略的是：嵌套层级越深，越要检查每一层的
是否完整闭合——漏一个
，后面所有列都会偏移。
.col-*.col-*widthflexmargin.rowmargin: 0 -15px.colpadding: 0 15px.rowoverflow-x: hidden.col-*.row.col-*....col-8.col-4 + .col-4 + .col-4 = 12.col-3.col-4.col-6.col-3.rowmargin-topmt-2margin-top: 0.5remmb-3gx-4gap-x: 1.5remmargingx-0 gy-0.row { margin: 0 }.row.col.colpadding: 0margin: 10px.coldisplay: inline-block.container-fluid.col-lg-6.col-12.row → .col → .row → .col.row