Bootstrap 5+ 用 flex 工具类实现圣杯布局：父容器 d-flex + flex-nowrap + h-100，左右栏 flex-shrink-0 + 固定宽，中栏 flex-grow-1，三栏 h-100 保等高。
Bootstrap 5+ 已完全移除对 float 布局的支持，原生只提供基于 Flex 的栅格系统；用它做圣杯布局不是“适配旧方案”，而是直接用 flex 语义精准表达：两侧定宽、中间自适应、DOM 顺序优先——这正是现代圣杯布局的正确打开方式。
为什么不用 Bootstrap 的 .row/.col 做圣杯？
Bootstrap 的 .col 默认是等分或按比例分配剩余空间，不支持「左侧固定 + 中间撑满 + 右侧固定」这种非对称弹性分配。强行套用 .col-2 .col .col-3 会遇到两个硬伤：
-
.col依赖父级.row的display: flex，但它的flex行为受flex-basis和flex-grow控制，无法让中间列真正「无视左右宽度、独占剩余全部空间」 - 当左右列内容高度不同时，
.row默认align-items: stretch，但中间列若没显式设高，就无法自动拉齐——而圣杯要求「三栏等高以 container 为基准」
用 Bootstrap 的 flex 工具类手写圣杯容器
放弃 .row/.col，直接用 Bootstrap 提供的底层 flex 工具类组合出语义清晰的结构。关键点：
- 父容器加
d-flex+flex-nowrap（禁用换行） - 左栏：加
flex-shrink-0（禁止压缩）+ 宽度类如w-200（需自定义）或内联style="width:200px" - 中栏：加
flex-grow-1（吃掉所有剩余空间） - 右栏：同左栏，
flex-shrink-0+ 固定宽度 - 三栏统一加
h-100或设最小高度，确保等高
示例 HTML：
<div class="d-flex flex-nowrap h-100"> <aside class="bg-success flex-shrink-0 w-200">左栏</aside> <main class="bg-primary flex-grow-1">中间自适应</main> <aside class="bg-danger flex-shrink-0 w-250">右栏</aside> </div>
注意：w-200 / w-250 需在 CSS 中补充（Bootstrap 默认无像素级宽度工具类）：
.w-200 { width: 200px !important; }
.w-250 { width: 250px !important; }
必须手动处理的兼容性与细节
即使用了 flex-grow-1，仍可能踩坑：
-
flex-grow对min-width敏感：如果中间内容有超长单词或未断行元素，会导致横向溢出。加overflow-wrap: break-word或word-break: break-word - IE11 下
flex-grow: 1有时失效，需补flex: 1（Bootstrap 5 已不官方支持 IE，但若项目强制要求，得额外 hack） - 父容器若没设明确高度（比如
h-100），且自身不在 flex 上下文中，h-100不生效——此时应确保其祖先有height: 100vh或类似约束 - 滚动行为：若中间内容超长，想让整页滚动而非仅中间栏滚动，别给中间栏设
overflow-y: auto，让body承担滚动
真正难的从来不是写几行 flex 类，而是想清楚：你的「圣杯」是否真需要 DOM 顺序优先？是否允许中间栏内容撑开整体高度？这些逻辑判断，比 class 名字重要得多。
