Html 引导-如何以不同的对齐方式对齐5个图像？

我为视图创建了一个布局，我想按以下方式排列我的图像： [！[在此处输入图像描述][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

本性
多美的日出啊

您可以这样做，我也建议使用砖石结构

<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>

请注意，如果使用此选项，则应使用
object fit
拟合图像，以便使用不同的尺寸
 这被称为
massy
请参考关于如何实现它的链接，也请参考是否可以使用引导行/列处理它？检查链接，这里可以使用行，但只能使用静态数据。@AkhilAravind，所以我不需要安装任何东西？它是否提供了我想要的布局？但它不适合结尾屏幕确实为您提供了所需的布局。我不知道你说的“屏幕尽头”是什么意思。无论如何，你应该复制并粘贴在Codepen中，并使用它来理解网格。如果
框
很小，我可以更改高度/宽度以使我的图像看起来更大吗？@LordJesus我更新了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;
}