srcmini我需要帮助解决这个难题。在Bootstrap 4.1中使用卡片列和卡片时, 如果我不想这么做, 则行会中断。我将列数设置为4, 当有4张卡片时, 它看起来很完美。当添加第五张卡时, 它会将行分为顶部3张和底部2张。有谁知道解决办法。我在下面提供了所有行的屏幕截图, 分为2部分。第二部分”过渡”是当前发生问题的地方。
我尝试过将widows和orphans设置为未设置, 但这没有用。卡设置为内联块。
我的代码在这里：https://jsfiddle.net/alecruckus/1savgxjm/10/
</div>
#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>因此, 你的代码没有问题：这是列计数的正确工作：如果卡数很多, 你不会注意到空白的”问题”。
如果你想进行行方向处理(即从左到右, 然后从上到下), 则可以使用普通的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>
评论前必须登录！
注册