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>