Bootstrap-如何以不同的对齐方式对齐 5 个图像?

对齐

关注

发信

关注(28)粉丝(399)

Bootstrap-如何以不同的对齐方式对齐 5 个图像?

本文介绍了Bootstrap-如何以不同的对齐方式对齐 5 个图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我为视图创建了一个布局，我想在下面以这种方式排列我的图像:[![在此处输入图片描述][1]][1]

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

下面是我的代码:

<div class="row"><div class="col-lg-4 col-md-4 col-sm-7 col-xs-7 d-flex"><div class="容器"><img src="{{asset('/images/Home_Bed.jpg')}}" alt="" style="margin-top:100px; margin-left:20px;"/><div class="text-block"><h4>自然</h4><p>多么美丽的日出</p>

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

是我犯了错误吗?>

解决方案

你也可以这样做，我也推荐使用 masonry.


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

和 CSS:

.row {底边距:30px；}*[class*="col"] {高度:250px；溢出:隐藏；显示:块；}.col-8 {高度:350px；}*[class*="col"] img {宽度:100%；最小高度:100%；显示:块；适合对象:覆盖；}.自定义位置{位置:相对；底部:-100px；}

请注意，如果您选择此选项，您应该使用 object-fit 来拟合图像，以便您可以使用不同的尺寸.

I created a layout for the view and I want to arrange my image in this way below:[![enter image description here][1]][1]

I created my alignment and plan to use a row with two columns but so far my top left two pictures and the one below is are space out far apart and I can't get it to look like the image. The two right picture are also space out apart.

Below is my code:

<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

Is there a mistake I made?>

解决方案

You could do something like this also I also recommend using masonry.

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

And the 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;
}

Note that if you go with this option you should fit images with object-fit so you could use different sizes.

这篇关于Bootstrap-如何以不同的对齐方式对齐 5 个图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-29 10:19