Bootstrap 两个小图像与一个大图像对齐

f1tvaqid  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(244)

我正在努力,我将如何编码,以创建两个垂直的图像,是否有可能减少高度的较大的图像,而不减少宽度?因为我需要适合它在col-md-8任何想法?
这就是我需要的形象。
Click here
HTML和CSS代码:
第一个
上面的代码是我用来制作图像2和3旁边的大图像。大图像的尺寸是900 x767

qybjjes1

qybjjes11#

您可以使用flexbox属性来达到您想要的效果,并将影像设定为背景。
第一个

vbkedwbf

vbkedwbf2#

在Bootstrap 5中,可以使用d网格间隙x。例如:

    • HTML格式**

第一个

mi7gmzs6

mi7gmzs63#

您应该将代码格式设置为如下所示:

<div class="row">
        <div class="col-md-8">
            <img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div> 
        </div>
        <div class="col-md-4">
             <img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
             <img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
        </div>
    </div>

正如您所看到的col-md-4底部的两个图像,如果您扩展100%宽度,下一个图像将下降到下面。
你不应该有一个类名中同时包含rowcol-md的类。(请参见http://getbootstrap.com/css/
关于减少高度而不是宽度,你不能在画图或Photoshop上裁剪图像,并上传正确高度的图像吗?

相关问题