如何让 Bootstrap 网格在所有方面都具有相同的间距？答案

【问题标题】：How can I get Bootstrap grid to have the same spacing on all sides?如何让 Bootstrap 网格在所有方面都具有相同的间距？
【发布时间】：2020-08-18 16:42:58
【问题描述】：

我正在尝试使照片均匀分布。 example。我似乎无法垂直更改网格之间的空间。

 <section class="Sculptures">
        <h2 class="Sculptures-heading">Sculptures</h2>
    
        <div class="container p-0">
          <div class="row">
            <div class="col-lg-4">
              <img class="pigeons" src="img\Pigeons-Together-02.png" alt="Pigeons_Together_Sculpture">
            </div>
            <div class="col-lg-4">
              <img class="fox-Sculpture" src="img\fox.png" alt="Fox-02">
            </div>
            <div class="col-lg-4">
              <img class="flying-bird" src="img\flying-bird.png" alt="flying-bird-Sculpture">
            </div>
          </div>
    
      
    
        <div class="row">
            <div class="col-lg-4">
              <img class="tree-Sculpture-2" src="img\tree (2).png" alt="tree-Sculpture">
            </div>
            <div class="col-lg-4">
              <img class="tree-Sculpture-3" src="img\tree (3).png" alt="tree-Sculpture">
            </div>
            <div class="col-lg-4">
              <img class="tree-Sculpture-1" src="img\tree (1).png" alt="tree-Sculpture" </div>
            </div>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

首先，您应该查看 Bootstrap 已有的图像类。

<div class="row">
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
</div>

如果这对您不起作用并假设您的所有图像大小相同，您可以使用 flex 类来调整一行中的所有元素。

<div class="d-flex align-content-between py-2">
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="img-fluid" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="img-fluid" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="img-fluid" src="https://via.placeholder.com/350x150" alt="...">
    </div>
</div>
<div class="d-flex align-content-between py-2">
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="" src="https://via.placeholder.com/350x150" alt="...">
    </div>
</div>

如果您仍然觉得需要调整间距，您可以使用间距实用程序类。我建议您使用填充类来分隔元素，因为边距类可能会导致页面上的其他类型的调整。这里我使用了py-2这个类。

祝你好运！

一些文档链接

【讨论】：