javascript - Bootstrap 4 Card Deck 固定卡片宽度(当每行卡片数量少于指定数量时)

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>

每张卡都由 span 标签分隔，我不记得为什么了。

这是一个代码笔:https://www.codeply.com/p/A2JgtdhP1Y (按平板电脑 View ，然后在观看底部卡片的同时更改宽度)

正如您在某些分辨率下看到的，底行的卡片，如果它们少于该行允许的最大卡片数量，将尝试通过扩展宽度方式来填充间隙，我想停止这种情况并有它们向左对齐，宽度与上面其他卡片相同。

编辑:对于遇到此问题的其他人，设置卡片的全局最大宽度是可行的。您必须为所有媒体查询尝试几种不同的宽度，以便底部的宽度对齐，我还为我的卡片组使用了 html id，因此此 css 仅适用于那些特定的卡片，并且不适用于整个网站。

Answer 1

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

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

或者您可以引用之前的帖子。

Previously discussed: Bootstrap 4 card-deck with number of columns based on viewport

.card {
    max-width: 13rem;

}