Bootstrap无内置阴影文字类，需自定义CSS；响应式Hero区可用.container+.row+.col实现，核心是min-height:100vh+flex居中，文字容器用.col-lg-8.mx-auto.text-center，阴影推荐双层text-shadow并随屏幕缩放，避免height:100vh及绝对定位脱离栅格流。
Bootstrap 本身不提供“带阴影文字标题”的内置类，必须手动加 CSS；但响应式 Hero 区可以完全用 Bootstrap 的栅格、间距和断点工具实现，无需额外框架。
如何用 Bootstrap 搭建响应式 Hero 区结构
核心是利用 .container + .row + .col 组合，配合 vh 高度和垂直居中工具类。注意：Bootstrap 5 默认禁用 box-sizing: border-box 的全局重置（实际已启用），但需确认项目未被覆盖。
-
.hero-section { min-height: 100vh; display: flex; align-items: center; }是最可靠居中方式，比.d-flex .justify-content-center .align-items-center更可控（后者在内容溢出时易失效） - 文字容器推荐用
<div class="col-lg-8 mx-auto text-center">，避免小屏下文字过宽，mx-auto在lg及以上才生效，sm下自动占满 - 不要用
.h-100套在子元素上——它依赖父元素显式高度，而min-height: 100vh不触发h-100计算
如何给标题添加阴影效果且保持可读性
Bootstrap 没有 text-shadow 工具类，必须写自定义 CSS。关键不是“加阴影”，而是让阴影在不同背景（尤其图片/渐变）下始终可读。
- 单层阴影如
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);在浅色背景上会发灰，建议用双层：text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2); - 如果 Hero 背景是图片，务必加
background-blend-mode: overlay;或半透明遮罩层（<div class="hero-overlay">），否则阴影会被背景吞掉 - 响应式阴影需随字号缩放：在
@media (max-width: 768px)中同步调小text-shadow的偏移和模糊值，否则小屏下阴影会糊成一团
如何避免常见响应式错位问题
Hero 区错位通常不是 Bootstrap 栅格问题，而是 CSS 层叠或视口单位误用导致。
- 慎用
height: 100vh—— iOS Safari 和部分安卓浏览器会把地址栏高度算进vh，造成滚动条或空白，改用min-height: 100vh+height: auto -
.display-1到.display-4在xs下字号过大，需配合font-size媒体查询重置，例如：@include media-breakpoint-down(sm) { .display-2 { font-size: 2.5rem; } } - 如果用了
position: absolute叠加元素（如按钮浮层），记得给父容器加position: relative，否则绝对定位会脱离 Bootstrap 栅格流
真正难的不是写阴影或调栅格，而是测试真机下的 vh 行为、图片加载延迟导致的布局抖动，以及暗色模式下阴影颜色是否仍够对比——这些没法靠类名解决，得靠 DevTools 的设备模拟和真实设备连测。
