Bootstrap如何实现三列等宽布局-Bootstrap教程-PHP中文网

用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 里。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

正确结构必须严格满足：一个 div class="row" → 三个并列的 div class="col-4" → 每个里面放 img。任何多余、漏掉

、或者把第三列写在 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 等响应式显示类控制断点


实际写的时候，最容易被忽略的是父容器的 display 类型和子元素的层级关系——flex 生效的前提是父元素真正在用 flex 布局，而栅格生效的前提是结构严格符合 row > col 嵌套。两者不能混，选哪套就得彻底贯彻哪套规则。