怎样才能让Bootstrap网格在所有边都有相同的间距？

Question

我正试着均匀地把照片隔开。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>

Answer 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类。

祝好运!

一些指向文档的链接

image classes

alignment

spacing

picture tag