用col-4实现三列等宽最直接：每列加col-4，父容器为row，三列总和为12，所有断点下均等分；错误常因结构不符（如漏row）、类名混用（如col-md-4）或内容溢出导致。
用 col-4 实现三列等宽最直接
bootstrap 的 12 列栅格系统天然支持三等分：每列加 col-4 即可，无需额外 css。它在所有断点下都保持 1/3 宽度，除非你主动覆盖或叠加其他断点类。
常见错误是误写成 col-3 或 col-6，结果变成四列或两列；也有人混用 col-md-4 和 col-sm-6 导致小屏错乱——如果你只要“始终等宽”，就只用 col-4，别加前缀。
-
col-4在 xs、sm、md、lg、xl 所有尺寸下都生效，宽度恒为 100% ÷ 3 ≈ 33.333% - 必须确保父容器是
row，且三个col-4是它的直接子元素，不能嵌套多层div中断父子关系 - 若内容高度不一致，可能因 flex 布局默认
align-items: stretch而拉高整行——加align-items-start到row可解决
响应式场景下用断点类控制堆叠时机
纯 col-4 在手机上也会强行并排，容易挤得看不清。多数真实项目需要“桌面端三列、移动端单列”，这时就得用带断点的类。
典型写法是 col-md-4：小屏（md 以下）自动堆叠，中屏及以上才并排。注意不是 col-sm-4，因为 sm 断点从 576px 开始，很多手机横屏就触发了，反而失去堆叠意义。
-
col-md-4对应 ≥768px 屏幕（平板竖屏起），更符合“桌面才三列”的直觉 - 如果希望中屏两列、大屏三列，可用
col-sm-6 col-lg-4，但需确认两个类不冲突——Bootstrap 按优先级覆盖，lg会覆盖sm - 避免同时写
col-4 col-md-6：小屏按col-4，中屏却变成 50%，视觉跳变明显
三列图片同行显示总跳行？先查 HTML 结构
第三张图掉到下一行，90% 不是 Bootstrap 问题，而是 HTML 写错了。最常见的就是 row 提前闭合，或第三列没包进 row 里。
正确结构必须严格满足：一个 div class="row" → 三个并列的 div class="col-4" → 每个里面放 img。任何多余 、漏掉 <div>、或者把第三列写在 <code>row 外面，都会让 Bootstrap 的 flex 布局失效，浏览器当普通块元素处理，自然换行。
- 用浏览器开发者工具检查：第三列的
col-4元素是否真在row下，且 computed style 中flex相关属性存在 - 图片本身没设
max-width: 100%也可能撑破列宽，加img-fluid类保底 - 列内如果有 padding/margin 或 border，可能累计超出 100%，用
g-0清除row间隙，或手动重置
想固定侧边栏宽度？别用 col-* 类
如果目标是“左右各 200px，中间自适应”，col-* 系统完全不合适——它只做比例划分，做不到像素级固定。这时候必须切换思路，放弃栅格，改用 flex 工具类。
核心是：父容器加 d-flex，左右列加 flex-shrink-0 + 显式宽度（如 w-25 或 style="width: 200px"），中间列加 flex-grow-1。混用 col-* 和 flex-grow-1 会导致样式冲突，因为前者基于百分比计算，后者基于剩余空间分配，逻辑互斥。
-
flex-shrink-0防止左右列被压缩，flex-grow-1让中间列吃掉所有空隙 - 显式设宽时优先用 Bootstrap 内置类（如
w-25表示 25% 宽），避免内联style增加维护成本 - 小屏下这种布局大概率要转为单列，需配合
d-md-flex等响应式显示类控制断点
