必须为row的父容器设置min-height并配合background-size: cover等样式才能使背景图生效，因row默认高度塌陷且是布局容器，不宜直接设背景图。
Bootstrap Row 背景图怎么设才生效
直接给 row 加 background-image 通常没反应——因为 row 默认是 display: flex，且自身高度塌陷（内部只有浮动或 flex 子项时，若没内容、没 min-height，高度为 0）。背景图自然“看不见”。
- 必须显式设置
height或min-height（比如min-height: 300px） - 避免用
.row直接设背景：它本意是布局容器，不是语义化区块；更推荐套一层div或改用.bg-*工具类配合自定义样式 - 如果用 Bootstrap 5+，
row是 flex 容器，子项col默认 stretch 对齐，但不会撑高父容器——仍需父级有高度
覆盖式背景图（cover）的关键 CSS 属性
要实现“图片铺满整个 Row 区域且不拉伸变形”，核心不是 Bootstrap 类，而是这三条 CSS：
-
background-size: cover—— 图片等比缩放填满容器，可能裁剪边缘 -
background-position: center center—— 防止偏移，居中取景 -
background-repeat: no-repeat—— 必须关掉重复，否则小图会平铺
Bootstrap 自带的 bg-* 类（如 bg-primary）只管颜色，不处理图片；背景图必须手写样式或用自定义 class。
推荐写法：用 wrapper div + 自定义 class
比直接操作 row 更可靠、更易维护。例如：
<div class="hero-section">
<div class="row">
<div class="col-12">
<h1>欢迎</h1>
</div>
</div>
</div>
然后加 CSS：
.hero-section {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh; /* 推荐用视口单位，避免内容空时塌陷 */
}
- 不用
height: 100%—— 它依赖父容器高度，容易失效；min-height: 50vh更稳 - 如果图太暗影响文字，可叠加伪元素遮罩：
::before+rgba(0,0,0,0.3) - 响应式下建议配
@media (max-width: 768px)换小图或调整background-position，避免关键人物被裁掉
为什么不用 row 的 background-image + padding 技巧
有人试过给 row 加 padding 试图“撑高”，但问题明显：
-
row的margin是负值（用于抵消col的padding），和padding叠加后布局错乱 - Flex 布局下
padding不参与主轴尺寸计算，不一定能撑起背景区域 - 移动端横屏/竖屏切换时，
row高度不可控，cover 效果失准
真正可控的方式只有一个：把背景逻辑从布局容器（row）里抽出来，交给语义清晰、职责单一的 wrapper 元素。
