Bootstrap 5响应式双栏布局视频背景文本溢出问题求助

一、修复文本溢出：调整定位逻辑 #

• 放弃给第一栏使用脱离文档流的绝对定位，改用父容器相对定位 + 内部元素绝对定位的组合，同时保留父容器自适应高度的能力：
  1. 给第一栏的col-md-6添加position-relative，作为内部绝对定位元素的参考容器。
  2. 文本容器仅在大屏（md及以上）使用position-md-absolute，小屏自动恢复相对定位，让文本占据文档流空间，避免溢出。
  3. 给文本容器添加d-flex flex-column justify-content-center确保文本垂直居中，同时用内边距p-5避免内容贴边。

二、解决视频自动播放问题 #

视频无法自动播放的核心是浏览器的自动播放政策，必须满足以下条件：

• 强制添加muted属性，现代浏览器要求静音才能自动播放。
• 搭配autoplay loop playsinline属性：playsinline用于移动端防止视频强制全屏。
• 用响应式类区分大屏视频和小屏图片，代码片段：

<div class="position-absolute top-0 start-0 w-100 h-100">
  <!-- 大屏显示视频 -->
  <video class="w-100 h-100 object-fit-cover d-none d-md-block" autoplay muted loop playsinline>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <!-- 小屏显示图片 -->
  <img src="mobile-bg.jpg" class="w-100 h-100 object-fit-cover d-md-none" alt="背景图">
</div>

三、完整的响应式双栏布局代码 #

<div class="container-fluid px-0">
  <div class="row g-0">
    <!-- 第一栏：背景+文本 -->
    <div class="col-md-6 position-relative min-vh-md-100">
      <!-- 背景容器 -->
      <div class="position-absolute top-0 start-0 w-100 h-100">
        <video class="w-100 h-100 object-fit-cover d-none d-md-block" autoplay muted loop playsinline>
          <source src="hero-video.mp4" type="video/mp4">
        </video>
        <img src="mobile-hero.jpg" class="w-100 h-100 object-fit-cover d-md-none" alt="移动端背景">
      </div>
      <!-- 文本容器 -->
      <div class="position-md-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center p-5 text-white bg-dark bg-opacity-40">
        <h2>响应式标题</h2>
        <p class="lead">这里是你的文本内容，小屏时会自动撑起容器高度，不会溢出到下方栏</p>
        <button class="btn btn-light w-25">按钮</button>
      </div>
    </div>
    <!-- 第二栏：内容区 -->
    <div class="col-md-6 p-5 d-flex flex-column justify-content-center">
      <h3>第二栏标题</h3>
      <p>第二栏的内容，大屏时和第一栏并排，小屏时自动堆叠在第一栏下方，完全自适应</p>
      <p>更多内容...更多内容...更多内容...更多内容...更多内容...</p>
    </div>
  </div>
</div>

关键注意事项 #

• 用object-fit-cover确保背景视频/图片填充容器，避免拉伸变形。
• 给第一栏添加min-vh-md-100，确保大屏时高度占满视口，小屏时自动适配内容高度。
• 全程依赖Bootstrap的栅格和响应式类，不要手动修改float或position破坏布局逻辑。

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