怎么在Bootstrap4中通过Flexbox纯CSS打造全屏自适应后台布局？-css教程-PHP中文网

Bootstrap 4中.d-flex.flex-column.h-100桌面端可行而移动端列高错乱，因.row在小屏仍为flex容器致子列被强制均分高度；需弃用.row，改用自定义flex容器+媒体查询切断flex行为，并设min-height:0和overflow-y:auto确保滚动生效。

怎么在bootstrap4中通过flexbox纯css打造全屏自适应后台布局？

直接用 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 包裹主内容区，改用 作为顶层容器
侧边栏和主内容区用和标签，加 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（默认值）以外的对齐方式。

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
容易踩的坑：

在 .row 内直接对子列加 flex-grow-1，会导致列宽失效（flex-basis 被覆盖）

h-100 对非绝对定位、非 flex 项的元素无效，比如普通  嵌套在 .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 容器行为 —— 否则它就是个摆设。