直接设 height: 100vh 不够用，因 .jumbotron 常嵌套在 .container 中，父级未占满视口宽度，导致背景无法通栏；须将其提至 body 直接子级并重置 margin、border-radius 等样式。
为什么直接设 height: 100vh 不够用
Bootstrap 4 的 .jumbotron 默认有内边距、圆角和阴影，且容器宽度受 .container 限制。设 height: 100vh 只能拉高盒子，但左右依然留白，背景色/图不会通栏——因为父级（比如 .container）本身没占满视口宽度。
必须移除容器约束并重置默认样式
通栏的核心是让元素脱离栅格系统约束，直接挂载到 级别布局流中。常见错误是只改 .jumbotron 自身，却忘了它常被包在 .container 或 .container-fluid 里。
- 把
<div class="jumbotron"> 提到 <code><main></main>或直接子级，避开任何.container - 显式覆盖：加自定义类如
.jumbotron-full，然后设width: 100vw、margin-left: calc(-50vw + 50%)（兼容居中缩放） - 重置关键属性：
border-radius: 0、margin-bottom: 0、padding: 6rem 1.5rem（避免文字贴边） - 用
background-size: cover+background-position: center center保证裁切居中 - 若需保留图片比例且不裁切，改用
background-size: contain，但要配min-height: 100vh防空白 - 慎用
background-attachment: fixed：在 iOS Safari 和部分安卓浏览器中会触发渲染异常或卡顿 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未被覆盖 - 用
min-height: 100vh替代纯height: 100vh，防内容少时高度塌陷 - 对 iOS 加 hack：
min-height: -webkit-fill-available（Safari 14.5+ 支持），兜底处理地址栏影响
背景图铺满需配合 background-size 和 object-fit 思路
仅设 background-image 不会自动撑满——尤其在响应式下，图片易拉伸或留白。Bootstrap 4 不内置 object-fit 支持，得手动补全。
移动端适配容易漏掉的三个点
桌面看着正常，一上手机就错位或溢出——多数因 viewport 设置、字体缩放或 Safari 的 100vh 计算缺陷（地址栏收起时高度变化）。
立即学习“前端免费学习笔记（深入）”；
.jumbotron 内部样式，却没意识到问题出在它的父容器没被清除。
