【发布时间】：2022-01-04 15:53:58
【问题描述】：
我想要多张卡片并排（最好是 10 张），但网页最多只能显示 6 张。
这是css：
@media (min-width: 576px) {
/* line 256, node_modules/bootstrap/scss/_card.scss */
.card-columns2 {
-webkit-column-count: 7;
column-count: 7;
-moz-column-count: 7;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-count: 1.25rem;
width: 100%;
orphans: 1;
widows: 1;}
/* line 267, node_modules/bootstrap/scss/_card.scss */
.card-columns2 .card {
display: inline-block;
width: 100%;
} }
这里是 HTML 代码的 sn-p：
<div class="mb-4 container-fluid" >
<div class="row" >
<div class="card-columns2">
<div class="card card-pin">
<img class="card-img" src="https://snipp" alt="#1481">
<div class="text-block" >
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="snipp" alt="#1546">
<div class="text-block" >
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
这就是列数为 7 时的样子： enter image description here
计数为 10 时看起来相同，但盒子更小。
【问题讨论】：
-
我不能说为什么，但是如果你有一个可以被“card card-pin”类的七整除的数字，你将有七列。计数为 16 时，它给了我 6 列，其中 1 行 6 和 2 行 5。使用
column-count分割内容通常更多用于文本等内容。我建议使用flex-box或grid来控制图像的布局。column-count专注于平均支付，如果这有意义的话。
标签： css bootstrap-4