Javascript Bootstrap 4卡组固定卡宽度（当小于每行指定的卡数时）

我在我的网站上有一副数量为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标签隔开，我不记得为什么了

这是一个密码笔：（按tablet view，然后在查看底部卡的同时更改宽度）

正如您在某些分辨率下看到的，底部一行的卡片，如果它们小于该行中允许的最大卡片数量，将尝试通过扩展宽度来填补空白，我希望停止此操作，并将它们与上面的其他卡片对齐，使其具有相同的宽度

---

编辑：对于存在此问题的任何其他人，设置卡的全局最大宽度都有效。对于所有的媒体查询，您必须尝试几种不同的宽度，因此最下面的一行是，我还为我的卡片组使用了一个html id，因此此css将仅适用于那些特定的卡片，而不会应用于整个站点

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

或者你可以参考之前的文章

---

谢谢，这帮我修好了。我不得不为每个@media查询选择不同的最大宽度，以确保正确排列，但最终还是成功了。

.card {
    max-width: 13rem;

}