如何在相同高度的列中实现等间距引导？答案

【问题标题】：How to achieve equal spacing in same height columns bootstrap?如何在相同高度的列中实现等间距引导？
【发布时间】：2021-07-19 22:25:31
【问题描述】：

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

我们的目标是创建一个间距保持图像高度的网格。为了在 div 之间创建一个空间，我为图像添加了一个边框，但是当我这样做时，它还在前两个 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>

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

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

【问题讨论】：

标签： css laravel grid bootstrap-5

【解决方案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

【讨论】：

非常感谢您的回答！我实际上正在使用引导程序 5，很抱歉我在问题上放错了标签。我尝试使用您的建议，但修复高度会扭曲大屏幕中的图像gyazo.com/359e939e5118dc867dc0477d5559d935
不用担心。图像失真可能是由于设置固定高度时造成的，例如40vh 你必须添加object-fit: cover;。这样图像会填满空间，但不会被拉伸。

【解决方案2】：

一位同事帮助我找到了最佳解决方案，因此我将发布解决方案以防有人遇到同样的问题：

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

【讨论】：