Bootstrap-如何在不同的对齐方式中对齐5个图像

Question

我为视图创建了一个布局，我想按以下方式排列我的图像：[！[在此输入图像描述][1]][1]

我创建了对齐方式，并计划使用一行两列，但到目前为止，我左上角的两张图片和下面的一张图片相距甚远，我无法使其看起来像图像。右边的两张照片也是间隔开的。

以下是我的代码：

<section class="learn_more">
<div class="row">  
<div class="col-lg-4 col-md-4 col-sm-7 col-xs-7 d-flex ">
<div class="container">
<img src="{{asset('/images/Home_Bed.jpg')}}" alt="" style="margin-top:100px; margin-left:20px;" />
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>       
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
<img src="{{asset('/images/Home_Pillow.jpg')}}" alt="" style="margin-top:100px; height:55%" />
</div>
<div class="col-lg-5 col-md-3 col-sm-5 col-xs-5" >
<img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="" style="margin-top:120px; margin-left:50px;" /> 
</div>

<div class="col-lg-7 col-md-7 col-sm-5 col-xs-5">
<img src="{{asset('/images/Shop_Page.jpg')}}" alt="No Logo" style="margin-left:40px; margin-bottom:100px;" />
</div>


<div class="col-lg-5 col-md-3 col-sm-5 col-xs-5" >
<img src="{{asset('/images/Home_Sofa.jpg')}}" alt="" style="width:100%; margin-left:150px;" /> 
</div>

</div

我犯了错误吗？>

Answer 1

你也可以这样做，我也建议使用砖石。

<div class="container">
<div class="row">
<div class="col-sm">
<img src="//via.placeholder.com/350x150" alt="">
</div>
<div class="col-sm">
<img src="//via.placeholder.com/350x150" alt="">
</div>
<div class="col-sm custom-position">
<img src="//via.placeholder.com/350x150" alt="">
</div>
</div>
<div class="row align-items-end">
<div class="col col-8">
<img src="//via.placeholder.com/700x300" alt="">
</div>    
<div class="col">
<img src="//via.placeholder.com/350x150" alt="">
</div>
</div>
</div>

和CSS：

.row {
margin-bottom: 30px;
}
*[class*="col"] {
height: 250px;
overflow: hidden;
display: block; 
}
.col-8 {
height: 350px;
}
*[class*="col"] img {
width: 100%;
min-height: 100%;
display: block;
object-fit: cover;
}
.custom-position {
position: relative;
bottom: -100px;
}

请注意，如果使用此选项，则应该使用object-fit来调整图像，以便使用不同的大小。