<p>正确使用 Bootstrap 栅格需严格遵循 .container → .row → .col-* 层级结构，否则 col-6 会因缺失负外边距和 padding 抵消机制而失效；应结合响应式类（如 col-md-6）、gutter 控制（gx-0）及内容弹性处理（img-fluid、overflow）实现真正对称。</p>
用 col-6 是最直接但容易失效的做法
很多人一上来就写 <div class="col-6"></div><div class="col-6"></div>，以为能撑满整行。但实际常出现两列之间有空隙、右侧列换行、或在小屏下错位——根本原因是没包裹在 .row 里，或父容器没加 .container/.container-fluid。
Bootstrap 的栅格系统依赖完整的层级：必须是 .container → .row → .col-*。漏掉任意一层，col-6 的负外边距（用于抵消 gutter）就无法生效，列宽也会因默认 display: block 而垂直堆叠。
正确写法示例：
<div class="container">
<div class="row">
<div class="col-6">左列</div>
<div class="col-6">右列</div>
</div>
</div>
对称 ≠ 视觉上等宽，要处理 gutter 和内容溢出
默认的 .row 有 margin-left: -15px 和 margin-right: -15px，而 .col-6 有 padding-left: 15px / padding-right: 15px，这是为了实现列间 30px 间隙（即 gutter）。如果你真要「完全对称」——比如左右列内容区域严格等宽、无间隙——就得干预这个设计。
- 去掉间隙：给
.row加gx-0（Bootstrap 5.2+），或手动覆盖margin和padding - 确保内容不撑破列宽：给列内元素设
overflow: hidden或word-break: break-word，否则长单词/URL 会让右列被挤到下一行 - 避免 flex 换行干扰：不要在
.col-6上额外加d-flex后又忘记设flex-wrap: nowrap
响应式对称布局不能只靠 col-6
写死 col-6 在移动端会变成两列并排，但手机屏幕窄，用户需要的是单列阅读流。所谓「完全对称」应理解为「在目标断点下对称」，而不是全尺寸强制双列。
推荐组合：
- 桌面端双列、移动端单列：
col-md-6（md 及以上占半，xs/sm 自动堆叠） - 仅在大屏对称：
col-xl-6，其他尺寸用col-12保证可读性 - 如果必须全尺寸双列（比如对比表格），改用
col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6，但务必测试 iPhone SE 等窄屏——文字可能过小或溢出
col-6 在 Flexbox 模式下可能被意外拉伸
Bootstrap 5 默认用 Flexbox 实现栅格，这意味着 .row 是 display: flex，而 .col-6 是 flex: 0 0 50%。但如果某个列里内容是图片、iframe 或设置了 width: 100% 的绝对定位元素，它可能突破 50% 宽度，导致另一列被压缩或换行。
解决方法很具体：
- 给列内图片加
img-fluid类（自动max-width: 100%+height: auto） - 避免在列中写
style="width: 600px"这类固定像素值 - 若列内含卡片组件，确认卡片没设
min-width；有的 UI 库卡片默认min-width: 250px，在窄屏下会破坏对称
对称布局真正的难点不在栅格类名本身，而在你是否意识到：Bootstrap 的「对称」是基于容器、间距、内容弹性三者共同约束的结果。少控制其中一环，视觉就失衡。
