Bootstrap4三栏布局教程详解

Bootstrap 4原生栅格系统无法实现“两边固定、中间自适应”的三栏布局，因其基于静态等宽百分比划分，不支持动态分配剩余空间；必须摒弃.col类，转而利用内置Flex工具类（如.d-flex、.flex-shrink-0和.flex-grow-1）构建弹性布局——左右栏锁定宽度防压缩，中间栏通过flex-grow-1自动填满剩余空间，同时需注意IE兼容性陷阱、box-sizing统一及避免与栅格类混用导致的样式冲突，才能在真实项目中稳定落地这一高频需求。

Bootstrap 4默认栅格能否直接实现“两边固定、中间自适应”？

不能。Bootstrap 4的.col-*类基于预设断点和等宽百分比计算，.col-4始终占1/3宽度，不响应内容或容器剩余空间变化。所谓“中间自适应”，本质是让中间列占据所有剩余宽度，这超出了原生栅格系统的能力边界——它依赖的是Flexbox的flex-grow，而非栅格的静态划分。

如何用Bootstrap 4的Flex工具类配合flex-grow实现三栏？

Bootstrap 4内置了.d-flex、.flex-row、.flex-grow-1等实用类，无需写额外CSS即可组合出目标布局。关键在于：左右两栏用flex-shrink: 0（即.flex-shrink-0）锁死宽度，中间加.flex-grow-1抢夺剩余空间。

示例结构：

<div class="d-flex flex-row">
  <div class="bg-primary p-3 flex-shrink-0" style="width: 200px;">左栏</div>
  <div class="bg-light p-3 flex-grow-1">中间栏（自适应）</div>
  <div class="bg-success p-3 flex-shrink-0" style="width: 250px;">右栏</div>
</div>

• flex-shrink-0防止左右栏被压缩（即使容器变窄）
• 中间栏不设width，仅靠flex-grow-1填充空白
• 若需响应式宽度（如小屏时左右栏隐藏），可叠加d-none d-md-flex等显示类

为什么不用col类混搭flex-grow-1？

会冲突。Bootstrap 4的.col类内部已声明flex: 0 0 auto，会覆盖你手动加的flex-grow: 1。浏览器开发者工具里能看到flex-grow被划掉——这就是典型优先级失效。

正确做法是彻底放弃.col，改用纯Flex工具类：.d-flex + .flex-row + 宽度控制类（如flex-shrink-0 + flex-grow-1）。如果必须保留栅格语义（比如想用.container），把.row换成.d-flex即可，其余不变。

实际项目中容易忽略的兼容性细节

Bootstrap 4的Flex工具类在IE10–11中表现不稳定，尤其flex-grow可能失效或导致换行。若需支持旧版IE，必须降级方案：

• 用table-layout: fixed模拟三栏（兼容性最好但语义差）
• 为IE单独加CSS：对中间列设width: calc(100% - 450px)（假设左右总宽450px）
• 检查flex-basis是否被意外重置——Bootstrap 4中.flex-grow-1未显式设flex-basis，某些场景下需手动补flex-basis: 0

真正麻烦的不是写法，而是当父容器有padding或子项含border时，flex-grow计算剩余空间会出偏差——这时得用box-sizing: border-box统一盒模型，否则中间栏宽度会少几个像素。

到这里，我们也就讲完了《Bootstrap4三栏布局教程详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！