全屏背景色需设html、body高度为100%，目标容器用min-height:100vh并清除内外边距，背景色应写在vh-100容器上而非.container内。
背景颜色铺满全屏，根本不需要弹性布局（Flexbox）参与——它只管内容排列，不解决高度来源问题。 直接给 body 或顶层容器设 background-color 并配合高度控制即可，Flex 只是“顺便用来居中内容”的辅助手段。
为什么加了 d-flex 还是背景色只占一小块？
常见现象是页面只在有文字/元素的区域显示背景色，其余部分白底。这不是 Flex 没生效，而是容器本身高度为 0 —— body 和 html 默认不占满视口，div 也按内容撑高。
- 必须显式设置
html, body { height: 100%; }，否则min-height: 100vh在某些嵌套下也会失效 - 目标容器（比如
<div class="hero">）要用min-height: 100vh，不是height: 100vh，避免内容超长时被截断 - 别把背景色写在
.container或.row上：它们自带max-width和padding，会缩窄实际渲染区域
用 Bootstrap 5 工具类快速实现全屏背景色
Bootstrap 5 提供了现成的高度和间距类，比手写 CSS 更稳，尤其对移动端 Safari 的 vh 行为做了兼容性兜底。
- 外层用
<div class="vh-100 d-flex justify-content-center align-items-center">：其中vh-100等效于min-height: 100vh，且已适配dvh回退逻辑 - 必须加
p-0 m-0清除默认内外边距，否则.container-fluid或.row的padding/margin会让背景色边缘“露白” - 背景色直接写在该容器上：
style="background-color: #0d6efd;"，不要依赖bg-primary类——它只作用于内容区，不扩展到整个vh-100高度 - 如果要响应式换色，用
@media直接覆盖style或加自定义类，别指望bg-dark自动随断点变
容易被忽略的兼容性细节
看似只是设个背景色，但 iOS Safari 地址栏收起/弹出会改变视口高度，导致 100vh 计算值跳变，出现短暂留白或裁顶——这和 Flex 无关，但常被误判为布局问题。
- 优先用
vh-100而非手写height: 100vh：Bootstrap 5.3+ 内置的vh-100类已包含min-height: 100dvh回退规则 - 若需深色主题 fallback，直接在容器上写
background-color: #212529; background-color: color-mix(in srgb, #212529 80%, transparent 20%);，避免纯黑在 OLED 屏上过亮 - 别在
.container内部再套d-flex做全屏背景：它的max-width会强制限制宽度，背景色永远铺不满屏幕左右边缘
