Bootstrap Card / Card-columns Breaking

Question

我需要帮助来解决这个难题。 在 bootstrap 4.1 中使用卡片列和卡片时，当我不想要它时，行会中断。我将列数设置为 4，当有 4 张卡片时，它看起来很完美。当添加第五张卡片时，它会将行分成顶部的 3 张卡片和下面的 2 张卡片。有谁知道解决这个问题。我在下面包含了我所有行的屏幕截图，分为 2 个部分。第二部分“过渡”，是当前出现问题的地方。

我曾尝试将寡妇和孤儿设置为未设置，但没有奏效。卡片设置为 inline-block。

我的代码在这里： https://jsfiddle.net/alecruckus/1savgxjm/10/

</div>

Answer 1

在这里你可以找到“问题”：https://getbootstrap.com/docs/4.0/components/card/

卡片可以通过 CSS 组织成类似 Masonry 的列 将它们包装在 .card-columns 中。卡片是用 CSS 列构建的 属性而不是 flexbox 以便于对齐。 卡片已订购 从上到下从左到右。

如果有空格，卡片首先从上到下排列，然后从左到右排列。您可以使用数字准确理解顺序（我使用了默认的 Boostrap 列数）：

<div class="container">
  <h1>First Set of 4</h1>
  <div class="card-columns">
    <!-- Cabinet 1 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>1</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 2 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>2</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 3 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>3</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 4 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>4</b></p>
      <p>Model</p>
    </div>
  </div>
</div>

<div class="container">
  <h1>Second Set of 5</h1>
  <div class="card-columns">
    <!-- Cabinet 1 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>1</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 2 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>2</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 3 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>3</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 4 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>4</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 5 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>5</b></p>
      <p>Model</p>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

所以，你的代码没有问题：这是column-count的正确工作：如果卡片很多，你不会注意到空白空间的“问题”。

如果你想要一个行方向的配置（即首先从左到右，然后从上到下），你可以使用普通的 col-xx-xx 引导类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
    <h1>First Set of 4</h1>
    <div class="row">
        <div class="col-sm-3">
            <!-- Cabinet 1 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>1</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 2 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>2</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 3 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>3</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 4 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>4</b></p>
                <p>Model</p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h1>Second Set of 5</h1>
    <div class="row">
        <div class="col-sm-3">
            <!-- Cabinet 1 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>1</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 2 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>2</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 3 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>3</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 4 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>4</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 5 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>5</b></p>
                <p>Model</p>
            </div>
        </div>
    </div>
</div>