Bootstrap 4卡列寬度

Question

我使用的文檔代碼來創建將有3-4卡的卡列布局。我從一個開始。這裏是我的代碼：

<div class="card-columns"> 
    <div class="card"> 
    <img class="card-img-top img-fluid" src="..." alt="Card image cap"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit 
longer.</p> 
    </div> 
</div> 

Fiddle

我要的是有我的專欄以提供整個寬度。就像在我的例子中，當我在某個時候調整它的右側時，它佔用了整個空間。那可能嗎？

謝謝

Answer 1

它基本上是same issue as explained here。在Bootstrap中，每個斷點定義了不同數量的列。這就是爲什麼它會在小提琴的小屏幕上顯示1列。因此，如果您想將其更改爲始終爲1列，則可以使用CSS，但這會影響整個卡組列，而不僅僅是一張卡。

.card-columns { 
     column-count: 1; 
    } 

https://www.codeply.com/go/PKwviFqstk

另見：Is there a way to specify different width to columns in CSS3?