Bootstrap 4 如何使引导网格在所有边上具有相同的间距？

我正试图把照片均匀地隔开。我似乎无法改变网格之间的垂直空间

 <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已经拥有的映像类

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

如果仍然需要调整空间，可以使用spacing实用程序类。我建议您使用padding类来分隔元素，因为margin类可能会在页面上引起其他类型的调整。这里我使用了类

py-2

祝你好运

文档的一些链接