Question

我正在尝试制作一个包含3张图片的块，其中2张图片的大小相同，而1张图片的宽度是其余图片的两倍。我在这里搜索了类似的问题，但它们对我没有帮助。

how to use no margin image side image in html, css <-不起作用，也尝试了另一个类似的问题

HTML5代码是：

<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="icon" href="images/favicon.png">
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-reboot.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.blockUI.js"></script>    
</head>
    <div class="container-fluid" style="max-height: 450px; max-width: 1380px;margin:0;padding:0;"><!-- tried without margin/padding as well -->
        <div class="row">
            <div class="col-3">
                <img src="images/2.jpg" class="img-fluid" style="margin:0;padding:0;" />
            </div>
            <div class="col-3">
                <img src="images/1.jpg" class="img-fluid" style="margin:0;padding:0;"/>
            </div>
            <div class="col-6">
                <img src="images/3.jpg" class="img-fluid" style="margin:0;padding:0;"/>
            </div>
        </div>
    </div>

也尝试没有边距/填充，也没有结果。我正在使用Bootstrap 4作为基本CSS，目前还有另一个CSS工作表，我可以根据需要进行编辑。似乎有些CSS工作表正在应用其他CSS之后创建边距，但我似乎找不到它。

（https://imgur.com/a/wHkil2k）

Answer 1

什么意思？您看到的图像之间的间隙是列中的填充。如果不希望使用它们，只需在https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters的.no-gutters元素上添加引导类.row。

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-3">
            <img src="images/2.jpg" class="img-fluid" />
        </div>
        <div class="col-3">
            <img src="images/1.jpg" class="img-fluid"/>
        </div>
        <div class="col-6">
            <img src="images/3.jpg" class="img-fluid" />
        </div>
    </div>
</div>

小提琴： http://jsfiddle.net/aq9Laaew/158414/

HTML5 / Bootstrap格式-图像不带填充/边距

1 个答案: