Bootstrap 4 Card Deck Fixed Card Width (当少于每行指定数量的卡片时)

Question

我的网站上有一副 x 数量的卡片，到目前为止，我对它们的响应方式非常满意。 对于给定的分辨率，它们永远不会超过每行的设定数量 n，它们保持相同的高度等。但是，唯一的问题是，如果我有一排 2，下面有 2，那么三分之一的额外 1行，最后一张卡片将扩展以填充 2 张卡片的宽度，而不是保持正确的大小，并保持在左侧。

我正在使用类似于下面的系统来设置每行允许多少张卡片，以实现设定的分辨率：

@media (min-width:992px) and (max-width: 1199px) {
   .card-deck span:nth-of-type(4n) {
      display: block;
      width: 100%;
    }

}
@media (min-width:768px) and (max-width: 991px) {
    .card-deck span:nth-of-type(3n) {
      display: block;
      width: 100%;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .card-deck span:nth-of-type(2n) {
      display: block;
      width: 100%;
    }
}

然后每张卡在 HTML 中定义为：

        <div class="card-deck">
        <div class="card mb-4" data-clickable="true" data-href="#">
            <img class="card-img-top" src="https://via.placeholder.com/700x400" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Test Card</h5>
            </div>
            <div class="card-footer">
              <small class="text-muted">More Info Here</small>
            </div>
        </div>
        <span></span>

每张卡都由一个跨度标签分隔，我不记得为什么了。

这是一个codepen： https://www.codeply.com/p/A2JgtdhP1Y （按平板电脑视图，然后在观看底部卡片的同时更改宽度）

正如您在某些分辨率下看到的那样，底行上的卡片，如果它们少于该行中允许的最大卡片数量，将尝试通过扩展宽度方式来填补空白，我想停止这个并将它们对齐到左边的宽度与上面的其他卡片相同。

编辑：对于遇到此问题的其他任何人，设置卡片的全局最大宽度是有效的。 您必须为所有媒体查询尝试几种不同的宽度，因此底部一行，我还为我的卡片组使用了 html id，因此此 css 仅适用于这些特定卡片，不适用于站点范围。

Answer 1

您需要在全局级别定义最大宽度。 您可以参考引导文档。

https://getbootstrap.com/docs/4.0/components/card/

或者你可以参考这个之前的帖子。

以前讨论过：Bootstrap 4 card-deck 与基于视口的列数

.card {
    max-width: 13rem;

}