Bootstrap 4中.d-flex.flex-column.h-100桌面端可行而移动端列高错乱，因.row在小屏仍为flex容器致子列被强制均分高度；需弃用.row，改用自定义flex容器+媒体查询切断flex行为，并设min-height:0和overflow-y:auto确保滚动生效。
直接用 Bootstrap 4 自带的 Flex 工具类 + 少量自定义 CSS 就能实现全屏自适应后台布局，不需要重写整个 Flex 逻辑，但必须绕开 .row 在移动端折行时的 height 均分陷阱。
为什么 .d-flex.flex-column.h-100 在桌面端可行，移动端却列高度错乱？
因为 Bootstrap 4 的 .row 默认是 display: flex，当两列（如 .col-md-8 和 .col-md-4）在小屏下变成 .col-12 并垂直堆叠时，父 .row 仍保持 flex 容器行为 —— 若它又被设为 flex-grow-1 或嵌套在 h-100 容器中，子列就会被强制拉伸均分高度，而非“内容多高就多高”。
常见错误现象：main 区域里左侧菜单和右侧内容都撑满视口高度，哪怕内容只有一行，滚动条也消失。
- 根本原因不是 Flex 本身，而是
.row没有在断点切换时“退化”回 block 流布局 - Bootstrap 4 没提供
.d-md-flex这类条件性 display 类，得手动补 - 不能只靠
vh-100，需配合html, body { height: 100% }才生效
如何让左右两栏在桌面端并排、移动端堆叠且各自高度自适应？
核心是把布局容器从 .row 换成语义更清晰、可控性更强的自定义 flex 容器，并用媒体查询切断 flex 行为。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 弃用
.row包裹主内容区，改用<div class="d-flex flex-column h-100"> 作为顶层容器<li>侧边栏和主内容区用 <code><aside></aside>和<main></main>标签，加flex-shrink-0防止被压缩 - 在移动端（
max-width: 767.98px）用 CSS 强制main和aside变成display: block，解除 flex 约束 - 给需要滚动的内容区单独加
overflow-y: auto和固定最小高度（如min-height: 0）
示例关键 CSS：
@media (max-width: 767.98px) {
.app-layout > aside,
.app-layout > main {
display: block !important;
width: 100%;
}
}
.app-layout > main {
min-height: 0; /* 让 overflow-y: auto 生效 */
overflow-y: auto;
}
flex-grow-1 和 h-100 混用时的优先级与风险
flex-grow-1 是 flex 项属性，h-100 是基于 height 的工具类；两者同时存在时，flex 生效优先级更高 —— 但前提是父容器是 flex 容器且未设置 align-items: stretch（默认值）以外的对齐方式。
容易踩的坑：
- 在
.row内直接对子列加flex-grow-1，会导致列宽失效（flex-basis 被覆盖） -
h-100对非绝对定位、非 flex 项的元素无效，比如普通<div> 嵌套在 <code>.container里 - 若父容器高度由内容撑开（而非
vh-100或height: 100%），flex-grow-1完全不触发
侧边栏固定宽度 + 主内容自适应的纯 CSS 实现
不用 JS、不依赖 Bootstrap 的 .col 列数系统，用原生 Flexbox 更稳。
结构示意：
<div class="d-flex h-100">
<aside class="flex-shrink-0" style="width: 250px;">菜单</aside>
<main class="flex-grow-1 d-flex flex-column">
<header class="flex-shrink-0">顶部栏</header>
<div class="flex-grow-1 overflow-auto">内容区</div>
</main>
</div>说明：
-
flex-shrink-0防止侧边栏被压缩，width: 250px显式声明比flex-basis更可靠 - 主内容区再套一层
d-flex flex-column，才能让内部header和内容区正确分配空间 -
overflow-auto必须配flex-grow-1和min-height: 0（后者常被忽略）
真正难的不是写出来，而是记住：只要用了 flex-grow-1，就得检查它的所有父级是否设置了明确高度或 flex 容器行为 —— 否则它就是个摆设。
