响应式两列布局中的视频背景，一列中有文本

Question

因此，在一个大屏幕上，我使用了这个(使用Bootstrap 5)，这很好：

​

​

但是，当我缩小屏幕时，第一列中的文本就会溢出到下面的部分，而不是正确地调整大小。

​

​

这是我最初的代码

<section class="bg-overlay ratio ratio-21x9  bg-soft-blue">
  <video poster="./assets/img/photos/movie2.jpg" src="./assets/media/home.mp4" autoplay loop muted></video>
  <div class="video-content">
  <div class="container">
       <div class="row  pt-10">
   <div class="col-lg-6 bg-soft-blue">
                         <h2 class="text-uppercase heading mb-5">Title</h2>
                         <p class="lead fs-lg lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                        </p>
                         <span><a href="#" class="text-uppercase btn btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-signup">Read More</a></span>
                         </div>
   <div class="col-lg-6"></div>
   </div>
   </div>
    <!-- /.container -->
    
  </div>
  <!-- /.video-content -->
</section>

我试过像这样玩：

<section>
 
       <div class="row pt-10" class="bg-soft-blue">
         
   <div class="col-lg-6 bg-soft-blue">
                         <h2 class="text-uppercase heading mb-5">Title</h2>
                         <p class="lead fs-lg lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                        </p>
                         <span><a href="#" class="text-uppercase btn btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-signup">Button</a></span>
                         </div>
   <div class="col-lg-6 bg-overlay ratio ratio-4x3  ">
   <video poster="./assets/img/photos/movie2.jpg" src="./assets/media/home.mp4" autoplay loop muted></video>
       <div class="video-content">
  <div class="container">
  video here
   </div>
   </div>
   </div>
    <!-- /.container -->
    
  </div>
  <!-- /.video-content -->
</section>
    <!-- /section -->

但这实际上使它变得更糟，因为它把它分成两部分。我尝试了嵌入，但后来它不自动播放。我很好，如果视频不工作在小屏幕上，只是一个图像，但我需要它的反应。我假设这是第一栏中的立场问题，或者可能是做不到的。任何帮助都很感激。

Answer 1

我不太清楚您想要的结果是什么，但是，您的问题似乎是由列上的比率类引起的。只需在列中完全嵌套视频容器即可。当网格元素包含BS组件时，引导网格元素(.container、.row、.col-*)工作得最好，而当您使它们成为组件时，效果就不太好了。

在这个片段中，文本将在较小的屏幕上叠加在视频上，它们将在中等和向上并排，这要感谢.col-12.col-md-6。注意，所有内容元素都完全嵌套在.col-*中：

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<section>

  <div class="row pt-10 bg-soft-blue">

    <div class="col-12 col-md-6 bg-soft-blue">
      <h2 class="text-uppercase heading mb-5">Title</h2>
      <p class="lead fs-lg lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <span><a href="#" class="text-uppercase btn btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-signup">Button</a></span>
    </div>
    <div class="col-12 col-md-6">

      <div class="bg-overlay ratio ratio-4x3">
        <video poster="https://dummyimage.com/400x300/a00/cf.png&text=4:3" src="./assets/media/home.mp4" autoplay loop muted></video>
        <div class="video-content">
          <div class="container">
            video here
          </div>
        </div>
      </div>
    </div>

  </div>

</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

​

Answer 2

所以我认为这是可行的，如果它对其他人有帮助的话

<section class="bg-soft-blue">
<div class="row  pt-10">
<div class="col-lg-6">
<h2 class="text-uppercase heading mb-5">Title</h2>
<p class="lead fs-lg lh-sm">copy</p>
<span><a href="#" class="text-uppercase btn btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-signup">Read More</a></span>
                     
</div>
 <div class="col-lg-6 ">
<div class="bg-overlay ratio ratio-21x9  ">
 <video poster="./assets/img/photos/movie2.jpg" src="./assets/media/home.mp4" autoplay loop muted></video>
<div class="video-content">
</div>
</div>
</div>

</div>
<!-- /.video-content -->
</section>
<!-- /section -->