时间戳

首页 > 解决方案 > 引导程序中的嵌套图像

bootstrap-4 - 引导程序中的嵌套图像

问题描述

好吧，所以我正在尝试使用引导程序制作一个画廊，但无论如何我都会一直失败。

查看下面的图像以查看网格本身的外观

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="d-flex gallery justify-content-center flex-wrap">
    <div class="col-12 d-flex justify-content-center">
        <img class="col-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        <img class="col-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        <img class="col-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
    </div>

    <div class="col-9 d-flex row">
        <div class="col-9 d-flex flex-wrap">
            <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        </div>

        <div class="col-3">
            <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
            <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        </div>
    </div>
</div>

测试 https://codepen.io/Tomitza93/pen/XWrRKwq

这就是它的实际外观 https://prnt.sc/oy33tc

标签： bootstrap-4

解决方案

修改此部分

 <div class="col-9 d-flex row">
    <div class="col-8 d-flex flex-wrap">
        <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
    </div>

    <div class="col-4">
        <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
    </div>
</div>

并添加这个 CSS

.gallery .col-12 , .gallery .col-3, .gallery .col-9, .gallery .col-8 , .gallery .col-4{
   padding: 2px !important
}

推荐阅读