Bootstrap的“12列”是flex份额协议而非像素划分，col类代表份额值（如col-4=4份），同级列份额和必须为12才能等宽；否则换行或留白，且col-4实际为flex: 0 0 auto; max-width: 33.333%，受内容撑开、box-sizing及缺失.row容器影响。
12列不是像素，是flex份额协议
Bootstrap的“12列”不是把容器切成12份固定像素宽度，而是定义了一套flex份额规则：每个col-类对应一个份额值（如col-4 = 4份），整行所有同级列的份额加起来必须为12，才能视觉上等宽。否则行为不可预期——比如两个col-8会换行，一个col-10加一个col-4会留白。
关键点在于：col-4实际生成的是flex: 0 0 auto; max-width: 33.333%，不是width: 33.333%。这意味着：
- 内容撑开（如未设
min-width: 0的<img alt="怎么理解Bootstrap的12列布局" >或长URL）会突破max-width，破坏等宽 -
padding、border、gap都额外占空间，但不参与“12份”计算 - 漏写
.row父容器时，.col的margin-left: -15px没被抵消，直接左移出界
为什么col-1×12不等于12宫格
写12个col-1看起来很对，但默认情况下它只在xs断点（col-sm-1等显式断点类，这些列会退化为col自动等分，变成12列堆成一列或错位排列。
更隐蔽的问题是：即使断点全写齐（col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1），也只控制了宽度，不解决高度、间隙、边框、背景这些“视觉宫格”必需要素。结果就是12个看不见边界的、高度塌缩的、紧贴在一起的空div。
真正要实现整齐的12等分视觉效果，得补CSS：
- 加
g-0关掉默认gap，再用padding统一内边距 - 给每列加
min-height或height防塌缩 - 用
border或background让“格”可见 - 或者直接放弃
.col-1，改用display: grid; grid-template-columns: repeat(12, 1fr)
col-sm-6 col-lg-4这类组合怎么生效
这不是JS动态切换class，而是纯CSS媒体查询叠加：Bootstrap为每个断点生成独立的@media规则。
col-sm-6对应@media (min-width: 576px) { flex: 0 0 50% }，col-lg-4对应@media (min-width: 992px) { flex: 0 0 33.333% }。所以这段class表示：
- col，自动等分（通常一列）
- 576–991px：两列（各占50%）
- ≥992px：三列（各占33.333%）
注意：后面类不覆盖前面类，而是各自在对应断点下生效；跨断点无冲突，但小屏没声明时会回退到默认行为，这点最容易被忽略。
真正难的不是写对class，而是内容不可控时的容错
当你面对CMS后台插入的富文本、用户上传的大图、未截断的JSON字符串、或嵌套的<table>时，<code>col的“等宽承诺”几乎必然失效。此时靠加更多断点类或调flex参数收效甚微。
更务实的做法是：
- 在
.col内部包裹一层<div style="min-width: 0">，切断flex子项的最小尺寸继承 <li>对图片强制<code>max-width: 100%; height: auto - 对长文本加
overflow-wrap: break-word - 对不确定内容区域，优先考虑
grid而非row/col，减少嵌套干扰
12列布局的复杂性，不在数字本身，而在它和真实内容交互时暴露的flex底层行为——理解这一点，比记住所有class名重要得多。
