bootstrap中col未平分空间，大概率是漏写.row父容器；.row提供display: flex和margin: 0 -15px以抵消.col的padding，缺之则.col退化为块级元素，无法按12列份额分配宽度。
col没平分空间，大概率是漏了.row父容器
Bootstrap的col类本身不带宽度，它依赖.row提供的display: flex和负外边距（margin-left: -15px）来抵消col自身的padding。一旦漏写.row，col就退化为普通块级元素，各自按内容撑宽，视觉上就是“没平分”甚至错位。
- 检查DOM结构：必须是
<div class="row"><div class="col">...</div></div>，不能直接<div class="col"> <li>用DevTools选中<code>col元素，看computed的display是否为flex——如果不是，说明.row没生效或被覆盖 - 常见干扰：自定义CSS写了
.row { display: block }，或用了!important覆盖了Bootstrap的flex声明 - 两个
col-8：总和16 > 12 → 第二个自动换行，不在同一行 - 一个
col-6：总和6 - 混用
col-6和col-md-6：小屏下前者生效、后者失效，导致一宽一窄 - 验证方法：在Chrome DevTools里看
col的flex-basis值，如果不是33.333%或25%等预期值，基本就是总和不对 - 对图片强制约束：
<img class="w-100" style="max-width:90%"> - 避免在
col里直接放<pre class="brush:php;toolbar:false;"></pre>或未截断URL，它们默认white-space: pre且无min-width限制 - 注意：
h-100这类高度类对宽度无影响，别指望它能“压住”内容 - 移除间隙干扰：
<div class="row g-0"> <li>响应式断点必须形成完整链条：只写<code>col-md-4，小屏下它不生效，列宽退化为auto；要全尺寸三等分，得写col-4或col-12 col-md-4 - 嵌套
.row时，子.row必须加mx-n3（不是ml-n3 mr-n3），否则负外边距无法正确抵消父col的padding，导致子列宽度压缩 - 最后一行列数不足12时，Bootstrap不会自动补空或拉伸——这不是bug，是设计使然；若需居中，得单独抽出来用
<div class="row justify-content-center"> 真正卡住平分效果的，往往不是类名拼错，而是flex上下文被悄悄截断：父容器缺<code>.row、断点没兜底、内容没设min-width: 0、或者gap和padding在暗处打架。调试时优先查这四点，比反复改class高效得多。
col总和不是12，Flex分配逻辑就失效
Bootstrap栅格的“12列”不是固定网格，而是Flex份额协议：col-4对应flex: 0 0 33.333%，但前提是同级col的断点数值加起来等于12。否则浏览器按默认Flex规则处理，结果不可控。
内容撑破col宽度，min-width: 0没加
col-4编译后是flex: 0 0 auto + max-width: 33.333%，不是width。这意味着长文本、大图、<table>等会强行撑开列宽，破坏等分。
<ul><li>给<code>col内部第一层内容容器（比如<div>、<code><p></p>）加style="min-width: 0"，或用工具类min-w-0（Bootstrap 5.3+）
gap和响应式断点链断裂干扰视觉判断
Bootstrap 5+默认给.row加了gap: 1rem，它占空间但不计入列宽计算。三列col-4看着“不等宽”，常是因为gap让内容区实际可用宽度不一致。
