15.Bootstrap(中文教程)元件：卡片群组

ㄧ.卡片群组

<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