Bootstrap 4 card-group中不同尺寸的卡片

Bootstrap 4中卡片組中可能混合不同尺寸的卡片。我想在左側尺寸上有一個大卡片（雙倍寬度），兩個較小右側的卡片，三個卡片的高度相同。Bootstrap 4 card-group中不同尺寸的卡片

<div class="container"> 
    <div class="row"> 
    <div class="card-group"> 
     <div class="card col-md-6"> 
      <div class="card-block"> 
      <h4 class="card-title">Card 1</h4> 
      <p class="card-text">Text 1</p> 
      </div> 
     </div> 
     <div class="card col-md-3"> 
      <div class="card-block"> 
      <h4 class="card-title">Card 2</h4> 
      <p class="card-text">Text 2</p> 
      <p class="card-text">More text 2</p> 
      <p class="card-text">More text 2</p> 
      </div> 
     </div> 
     <div class="card col-md-3"> 
      <div class="card-block"> 
      <h4 class="card-title">Card 3</h4> 
      <p class="card-text">Text 3</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div>

來源

2016-03-03 Ole Kristian Losvik

我覺得意圖是，卡一律平等的寬度和高度（http://v4-alpha.getbootstrap.com/components/card/#groups），但是你可以重寫默認的引導行爲，使其像這樣的工作..

.card-group [class*='col-'] { 
    float:none; 
}

http://codeply.com/go/4WVwRBTyTP

注意：這樣的通配符CSS選擇器很慢。這將是最好添加一個特殊的CSS類重寫列的引導float:left行爲在card-group

UPDATE

現在BS4是Flexbox的，額外的CSS現在不再需要。只需將card-group和row設爲相同的div，然後按照正常的設置寬度使用col-*即可。但是，使用card-group將阻止響應列封裝。

http://www.codeply.com/go/jzIcjyg6Xa

來源

2016-03-04 03:53:02 ZimSystem

-1

又見https://stackoverflow.com/a/35627731/1596547，如已經@Skelly解釋預定義的網格類（col-md-*）不要只還float設置width。

除了使用網格類的，你還可以將width直接：

<div class="card-group"> 
     <div class="card" style="width:50%;"> 
      <div class="card-block"> 
      <h4 class="card-title">Card 1</h4> 
      <p class="card-text">Text 1</p> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h4 class="card-title">Card 2</h4> 
      <p class="card-text">Text 2</p> 
      <p class="card-text">More text 2</p> 
      <p class="card-text">More text 2</p> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h4 class="card-title">Card 3</h4> 
      <p class="card-text">Text 3</p> 
      </div> 
     </div> 
     </div>

來源

2016-03-04 19:42:24

爲 card layout

的引導V4-β2文檔目前規定：

暫時，這些佈局選項尚未響應。

但是，正如ZimSystem's answer指出的那樣，卡組現在是flexbox。因此，您也可以覆蓋flex-grow樣式來設置相對卡尺寸。

<div class="card-group"> 
    <div class="card" style="flex-grow: 2"> 
     <div class="card-block"> 
      <h4 class="card-title">Card 1</h4> 
      <p class="card-text">Text 1</p> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-block"> 
      <h4 class="card-title">Card 2</h4> 
      <p class="card-text">Text 2</p> 
      <p class="card-text">More text 2</p> 
      <p class="card-text">More text 2</p> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-block"> 
      <h4 class="card-title">Card 3</h4> 
      <p class="card-text">Text 3</p> 
     </div> 
    </div> 
</div>

Codeply

來源

2017-11-09 17:50:12 Mat

Bootstrap 4 card-group中不同尺寸的卡片

回答

相關問題