Question

我需要帮助解决这个难题。在引导程序4.1中使用卡片列和卡片时，如果我不想这样做，则行会中断。我将列数设置为4，当有4张卡片时，它看起来很完美。当添加第五张卡时，它会将行分为顶部3张和底部2张。有谁知道解决办法。我在下面提供了所有行的屏幕截图，分为2部分。第二部分“过渡”是当前发生问题的地方。

我一直在尝试将寡妇和孤儿设置为未设置，但这没有用。卡已设置为内联阻止。

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

</div>

Answer 1

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

仅需CSS，即可将卡片组织成类似砌体的列将它们包装在.card列中。卡是使用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>

引导卡/卡柱断裂

1 个答案: