直接用.container或.row包裹背景图会被padding/margin截断边缘，因.container默认左右padding、.row负margin抵消后仍缩进，背景图仅限内边距区域；须绕开或用mx-n3和px-0抵消。
直接用 .container 或 .row 包裹背景图，一定会被 padding/margin 截断边缘——这不是 bug，是 Bootstrap 栅格的默认行为。必须绕开或抵消它。
为什么 .container 会让背景图“缩在中间”
Bootstrap 4 的 .container 默认有左右 padding（15px），.row 有左右 margin（-15px）来抵消，但叠加后实际内容区仍缩进。背景图渲染区域被限制在内边距以内，视觉上就像“没铺满”。
- 别把
background-image写在.container上——它最大宽度只有1140px（lg 屏），两边永远留白 -
.container-fluid也有默认padding: 0.5rem，不加px-0 py-0一样留白 - 如果非要用栅格结构，父容器必须同时加
mx-n3（抵消.row的-15pxmargin）和px-0（清空.container的15pxpadding）
最简可靠的 HTML + CSS 写法
不依赖任何 Bootstrap 工具类撑高或居中，只用原生 CSS 控制高度与背景行为：
- 目标容器（比如
<section class="hero-bg"></section>）设min-height: 100vh，不是height: 100vh——内容超长时不会被截断 - 显式写全四件套：
background-image: url("bg.jpg")、background-size: cover、background-position: center center、background-repeat: no-repeat - 路径必须带引号：
url("bg.jpg")，漏引号或路径错会导致整条声明失效 - 确保
html和body没有意外margin或padding：html, body { margin: 0; padding: 0; }
移动端 Safari 的 vh 跳动问题怎么稳住
iOS Safari 在地址栏收起/弹出时，100vh 不重绘，导致背景突然留白或裁切——min-height: 100vh 只能缓解，不能根治。
- 优先用
min-height: 100vh+height: 100dvh（现代浏览器支持），dvh响应地址栏变化 - 降级方案：加
@supports not (height: 100dvh) { .hero-bg { min-height: 100%; } }，配合html, body { height: 100%; } - 千万别用
background-attachment: fixed——iOS Safari 渲染不稳定，滚动时背景易撕裂或消失
文字层怎么叠在背景图上还不被栅格挤偏
背景图容器和文字容器是两层独立结构，别混在一个 .container 里强行塞。
- 背景层用自定义
<section class="hero-bg"></section>，不套任何 Bootstrap 容器类 - 文字层用
<div class="container"><div class="row"><div class="col">...</div></div></div>，靠d-flex align-items-center justify-content-center h-100垂直水平居中 - 如果文字要半透可读，加
background-color: rgba(0,0,0,0.3)或模糊滤镜：backdrop-filter: blur(2px)（注意 iOS 兼容性）
真正卡住的从来不是 cover 参数本身，而是你没意识到：Bootstrap 的栅格系统从不承诺“全屏”，它只管内容流；想全屏，就得主动跳出它的 padding/margin 链，再亲手把高度、定位、缩放三者对齐。真机连 USB 测一次，比在 Chrome 模拟器里调十遍都准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
