如何在相同高度的列中实现等间距 bootstrap？

Question

我正在构建一个网站以在特定网格中显示图像。我正在为这个项目使用 Laravel 和 Bootstrap。

目标是创建一个具有保持图像高度的间距的网格。为了在 div 之间创建一个 space，我在图像右侧添加了一个边框，但是当我这样做时，它还在前两个 div 处创建了一个底部边框，这使得前两个图像有一个身高比上一个小。:

图片：https://gyazo.com/9bd97d19073a123966a652e3603ebfd4

[![如您所见，前两个矩形有一个底部边框，而不仅仅是右边框]

作为参考，这是我尝试创建的网格类型： https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17 https://www.zarahome.com/pt/%C3%BAltima-semana/cole%C3%A7%C3%A3o-c1020095502.html

这是我目前的代码：

   <div class="row g-0 mx-0">
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
        </div>
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid style="border-right: 10px solid white;">
        </div>
        <div class="col-md-6">
            <img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
        </div>
    </div>

我就是不明白为什么加border-right也会加border-bottom。我尝试添加边距，但这会导致较大的图像跳出行，如下所示：https://gyazo.com/5a785de16398756021dd843ba038cbc6

有人可以帮我实现这个结果吗？ https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17

Answer 1

我假设您正在使用 Bootstrap 4 创建它，因为在您的标签中它显示 bootstrap-4。您的代码无法运行的原因是 g-0 来自 Bootstrap 5。可能是您查看了 Bootstrap v5 文档。

如果您使用的是 bootstrap 4，那么您可以将 no-gutters 添加到包含 row 的 div。

为了使图像保持相同的高度，我会添加一些自定义 css 并在其中添加 40vh。

我打了个例子给大家看看： https://www.codeply.com/p/BqPXPxcP2j

Answer 2

一位同事帮助我找到了最佳解决方案，所以我将 post 有效的方法以防有人遇到同样的问题：

<div class="d-row d-flex gap-2 justify-content-center" style="margin-bottom: 100px">
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-6">
            <img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid">
        </div>
    </div>

如何在相同高度的列中实现等间距 bootstrap？

How to achieve equal spacing in same height columns bootstrap?

css

grid

laravel

bootstrap-5