6列引导div内容器的左边距对齐

Question

我在一个行 div 中并排有两个 6 列引导 div，并且两个 div 都有一个要显示的图像，其中每个图像的宽度为视口的一半。我有一个标题和一个链接放在图像上方的左列中（我通过 CSS 将图像设置为列的背景）。我已将标题和链接放在容器中。

问题

容器不与两个 6 列引导 div 后面的文本（在容器内）的左边距对齐。我已经为容器设置了边距，但是当屏幕尺寸改变时对齐会消失。但低于 992px 的分辨率断点，一切都很好，因为列是堆叠的。我错过了什么还是做错了什么？

我是这个行业的新手，非常感谢您的帮助！ 这是代码

#aboutus {
  background-image: url("https://picsum.photos/946/381");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

<div class="row">
  <div id="aboutus" class="col-lg-6">
    <div class="container">
      <h2 style="color: white;">About Us</h2>
      <a class="small" href="#home" style="color: white;">Home</a>
      <i style="color: white;" class="fa fa-angle-right"></i>
    </div>
  </div>
  <div class="col-lg-6">
    <img class="img-fluid w-100" src="https://picsum.photos/946/381" alt="">
  </div>
</div>
<div class="container">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
     Dignissimos cupiditate ut nobis unde ipsa eius commodi, 
     praesentium eum. Natus, laborum illo est dolorem rem quos 
     ui ipsum nemo fuga. Odio, aut. Esse veniam quia corporis 
     dolor vitae totam.</p>
</div>

Answer 1

对于小屏幕你需要使用 col-* 类，在大屏幕之后你需要使用 col-lg-* 类，更多信息请查看link

在您的代码中，我使用 col-12 和 col-lg-6，因此在大屏幕上，您的两个图像并排显示，在小屏幕上，它以向上向下的方式显示

#aboutus {
  background-color: #e6603f;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row m-0">
  <div id="aboutus" class="col-12 col-lg-6">
    <div class="container">
      <h2 style="color: white;">About Us</h2>
      <a class="small" href="#home" style="color: white;">Home</a>
      <i style="color: white;" class="fa fa-angle-right"></i>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <img class="img-fluid w-100" src="https://picsum.photos/946/381" alt="">
  </div>
</div>

<div class="container">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
     Dignissimos cupiditate ut nobis unde ipsa eius commodi, 
     praesentium eum. Natus, laborum illo est dolorem rem quos 
     ui ipsum nemo fuga. Odio, aut. Esse veniam quia corporis 
     dolor vitae totam.</p>
</div>

Answer 2

将 col-lg-6 更改为其他响应大小。

在示例中，我将其更改为 col-6。 见：https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

#aboutus {
  background-color: #e6603f;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  background-image:url(https://picsum.photos/946/381);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div id="aboutus" class=" col-6">
    <div class="container">
      <h2 style="color: white">About Us</h2>
      <a class="small" href="#home" style="color:white">Home</a>
      <i style="color: white" class="fa fa-angle-right">                </i>
    </div>
  </div>
  <div class="col-6">
    <img class="img-fluid w-100" src="https://picsum.photos/946/381" alt="" />
  </div>
</div>

<div class="container">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
     Dignissimos cupiditate ut nobis unde ipsa eius commodi, 
     praesentium eum. Natus, laborum illo est dolorem rem quos 
     ui ipsum nemo fuga. Odio, aut. Esse veniam quia corporis 
     dolor vitae totam.</p>
</div>