6列bootstrap 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-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> 

Answer 2

对于小屏幕，您需要使用col- *类，大屏幕后，您需要使用col-lg- *类，有关更多信息，请检查此链接

在您的代码中，我使用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>