求助：使用Bootstrap 5创建全屏响应式Hero Image

核心问题修正 #

你之前用position-absolute导致Hero区块脱离文档流，才会遮挡下方元素；固定height:400px也没法适配不同屏幕的全屏需求。下面用Bootstrap 5内置类解决问题，几乎不用额外自定义样式：

完整可运行代码 #

<!-- 假设你的顶部导航是fixed-top（如果没有可以删掉这个nav） -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

<!-- Hero核心区块 -->
<section class="container-fluid p-0">
  <div class="bg-image bg-cover bg-center d-flex justify-content-center align-items-center min-vh-100 pt-5" 
       style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.png');">
    <div class="text-white text-center">
      <h1 class="mb-3">Heading</h1>
      <h4 class="mb-3">Subheading</h4>
      <a class="btn btn-outline-light btn-lg" href="#!" role="button">Call to action</a>
    </div>
  </div>
</section>

<!-- 下方内容（不会被遮挡） -->
<section class="container py-5">
  <h2>后续内容区块</h2>
  <p>这里的内容会正常排列在Hero图下方，完全不会被遮挡</p>
</section>

关键类&样式说明 #

• min-vh-100：Bootstrap内置类，让容器高度至少等于视口高度，自动实现全屏且响应式
• bg-cover + bg-center：确保背景图铺满容器、居中显示，自动适配屏幕尺寸
• d-flex + justify-content-center + align-items-center：用Flexbox快速实现内容垂直水平居中，简化嵌套结构
• pt-5：如果顶部有fixed-top导航，增加顶部内边距避免内容被导航遮挡（可根据导航高度调整，比如换成style="padding-top: 58px;"）
• 移除position-absolute：让Hero区块留在正常文档流中，下方元素会自动排列在它后面

额外新手友好建议 #

• 把内联样式移到外部CSS文件，方便后续维护
• 如果想在移动端缩小Hero高度，用响应式类：min-vh-80 min-vh-md-100（移动端80%视口高度，桌面端100%）

内容的提问来源于stack exchange，提问作者Theoritical_Theo