引导卡在彼此下方，但它们之间的距离太大

Question

我正在构建一个非常简单的网页，它有 6 个 Bootstrap 卡，连续 3 个，然后它应该在下面有 3 个。出于某种原因，它在前两张牌之间造成了巨大的差距，但在第三张牌上却没有。

这是它现在的样子（我已经缩小了所有卡片都可见）：https://imgur.com/FPBvYN2

这是我的卡片代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-4">
    <div class="card w-100" style="width: 32rem; height: auto;">
        <img class="card-img-top" src="images/duurzaamheid/zuivering.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Water zuivering</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
             <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
        </div>
      </div>
</div>

<div class="col-md-4">
    <div class="card" style="width: 32rem; height: auto;">
        <img class="card-img-top" src="images/duurzaamheid/recycle.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Recyclen van restafval</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
            <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->  
            </p>
        </div>
    </div>
</div>

<div class="col-md-4">
    <div class="card" style="width: 32rem;">
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX XXXXX</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
            <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
            </p>
        </div>
      </div>
</div>





<div class="col-md-4">
    <div class="card" style="width: 32rem;">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 11111</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
            <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
            </p>
        </div>
      </div>
</div>

<div class="col-md-4">
    <div class="card" style="width: 32rem;">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 22222</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
            <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
            </p>
        </div>
      </div>
</div>



<div class="col-md-4">
    <div class="card" style="width: 32rem;">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 33333</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
             <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
        </div>
      </div>
</div>

Answer 1

你在这里注释掉了你的结束<p>标签：

<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                     <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->

这看起来是在我删除了与您的 width: 32rem 内联样式冲突的错误 w-100 之后（我删除了所有这些）。我还添加了强制性的 .container 和 .row div，我认为您只是没有在您的问题中包含它们。

参见下面的 sn-p：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="images/duurzaamheid/zuivering.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Water zuivering</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="images/duurzaamheid/recycle.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Recyclen van restafval</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX XXXXX</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 11111</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 22222</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

这可能是因为您应用了额外的 CSS。在 Bootstrap 中，当涉及到宽度、填充或边距时，您很少需要添加任何 CSS。这一切都可以在您的 HTML 中完成。

首先，移除几乎所有的 CSS，包括宽度和高度，然后看看它的样子。您可能还会发现将前 3 个框放在 <div class="row"> 中很方便，然后将第二行放入接下来的 3 个框，依此类推。