Bootstrap的col类无固定宽度，仅在嵌套于.row且同级列断点值之和为12时才视觉等宽；否则因flex布局特性、内容撑开、padding干扰或结构错误导致异常。
Bootstrap 的 col 类本身不带固定宽度，所谓“12列”不是像素划分，而是 flex 布局下的份额协议：只有嵌套在 .row 中、且同级 col 的断点数值之和为 12 时，才会视觉上等宽；否则行为不可预期。
col-4 为什么不是 33.333% 宽度？
因为 col-4 对应的是 flex: 0 0 auto + max-width: 33.333%，不是直接设 width。这意味着：
- 内容超长（如未截断的 URL）、大图、
<table> 或未设 <code>min-width: 0的 flex 子项，会撑开列宽，破坏等宽 -
padding、border、margin会进一步压缩可用空间，导致实际内容区变窄 - 小屏下若未指定断点（如只写
col-4），它从xs（0px）起就生效，但内容可能溢出或触发横向滚动 - 漏写
.row父容器 →col的margin-left: -15px没有父级抵消，列左移出界 - 子列数之和 >12（如两个
col-8）→ 超出部分自动换行，第二列掉到下一行 - 子列数之和 col-6）→ 剩余空间留白，列不会自动拉伸填满
- 混用无断点
col和带断点col-md-6→ 小屏下无断点类退化为col自动等分，但其它列仍按断点逻辑，造成错位 - 全尺寸三等分：用
col-4（不是col），它从 0px 开始就生效；col只在 ≥576px（sm）才触发等分 - 防内容撑破：给
.col内部直接包裹的内容容器加min-width: 0，尤其对<img alt="Bootstrap栅格系统原理 12列布局用法" >、<pre class="brush:php;toolbar:false;"></pre>、长文本有效 - 消除 gap 干扰：默认
.row有gap: 1rem，它占用空间但不计入列宽计算；要严格等宽视觉，加g-0 - 居中又等宽：确保列数能整除 12（如 2/3/4/6 列），再加
justify-content-center；否则留白不对称，看起来“不匀” -
col-sm-6对应@media (min-width: 576px)下设flex: 0 0 50% -
col-lg-4对应@media (min-width: 992px)下覆盖为flex: 0 0 33.333% - 所以
col-sm-6 col-lg-4表示：576–991px 是两列，≥992px 变三列 - 注意优先级：后面类覆盖前面类，但仅限同一断点；跨断点不冲突，是叠加生效
col 总和不等于 12 会发生什么？
常见错误现象：列堆成一列、宽度极小、或整行被单个列占满不留间隙。根本原因是 .row 的负 margin 和 .col 的 padding 协作失效：
如何让 col 在所有尺寸下真正等宽？
不能只依赖“12列总和”，必须显式控制断点与收缩行为：
响应式切换（如 col-sm-6 col-lg-4）怎么生效？
Bootstrap 不是靠 JS 动态改 class，而是纯 CSS 媒体查询匹配：
真正难的不是写对 class，而是当内容不可控（比如 CMS 后台插入的富文本、用户上传的大图）时，col 的“等宽承诺”极易被打破——这时候得靠 min-width: 0、overflow-wrap: break-word、h-100 这些辅助规则兜底，而不是反复调 class。
