Bootstrap卡/卡列断裂 _WordPress主题

我需要帮助解决这个难题。在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/

【Bootstrap卡/卡列断裂】只需将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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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="http://img.readke.com/220526/0320094226-10.jpg" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> < /script> < script src="http://img.readke.com/220526/032009B40-11.jpg" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> < /script> < script src="http://img.readke.com/220526/032009C17-12.jpg" 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="http://img.readke.com/220526/0320094226-10.jpg" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> < /script> < script src="http://img.readke.com/220526/032009B40-11.jpg" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> < /script> < script src="http://img.readke.com/220526/032009C17-12.jpg" 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < 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" > < p> Color < b> 5< /b> < /p> < p> Model< /p> < /div> < /div> < /div> < /div>