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;

}