ㄧ.卡片群組

<div id="demo" class="component">
 <div class="card-group">
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.結構為card-body與card-footer
2.在card另外加入父元素card-group，形成了卡片群組，組合再一起。
3.內容如果比較多的話，兩個卡片的高度還是會一樣

二.卡片群組間隔

<div id="demo" class="component">
 <div class="card-deck">
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.將.card-group改成.card-deck讓卡片之間有間隔

三.卡片群組間隔

<div id="demo" class="component">
 <div class="card-columns">
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
    <p class="card-text">description...</p>

   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
  <div class="card text-center">
   <div class="card-body">
    <h4 class="card-title">title</h4>
    <p class="card-text">description...</p>
    <p class="card-text">description...</p>
    <p class="card-text">description...</p>
    <p class="card-text">description...</p>
    <p class="card-text">description...</p>
    <p class="card-text">description...</p>
   </div>
   <div class="card-footer">
    <a href="#" class="card-link">action</a>
    <a href="#" class="card-link">action</a>
   </div>
  </div>
 </div>
</div>


.component.demo{
 padding: 50px;
}

重點：
1.將.card-group改成.card-columns，讓每個卡片不同的高度進行排列對齊

codepen
參考：bootstrap4