如何在引導程序中打包（浮動）卡片4

Question

我正在使用引導程序4測試版。

我有一張卡片清單。我希望它們的寬度是固定的，但高度會根據內容而變化。

卡的數量可以從1到n。

我想要的效果是從左到右放置卡片，直到屏幕空間用盡，然後換行到下一行。

我已經嘗試了引導程序4示例頁面上列出的所有不同選項卡，但它們似乎不包裝。

我該如何做到這一點？

下面的例子顯示了它們3個，它們之間有很大的空間。

<div class="card-columns"> 

     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</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> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card"style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</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> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
    </div> 

Answer 1

這個工作了一段時間後，浮動的解決方案，我想出了在某些情況下，有些情況下令人不滿意，有些卡下方有大量空間。在查看了引導程序4卡之後，我發現了一個完全符合我想要的功能：「card-columns」

它將您的卡片排成三列，並在屏幕較小時重新排列爲一列。

Bootstrap Docs on card-columns

Answer 2

這裏的解決方案...... 使用引導ROW和COL對達致這，請按照下面的代碼。

<div class="row"> 
<div class="col-lg-4 col-md-3 col-sm-6"> 
    <div class="card"> 
     <img class="card-img-top" data-src="..." alt="Card image cap"> 
     <div class="card-block"> 
     <h4 class="card-title">Card title</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> 
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
     </div> 
    </div> 
</div> 
</div> 

Answer 3

我想出了一個浮動的卡類，它的工作原理：

<style> 
    .floating-card { 
     float: left; 
     margin: 5px; 
     max-width: 300px; 

    } 
</style> 

用法示例：

<div class="floating-card sortable"> 
    <section class="box-typical task-card task"> 
     <div class="task-card-photo"> 
      <img src="img/img-task.jpg" alt=""> 
     </div> 
     <div class="task-card-in"> 
      <div class="btn-group task-card-menu"> 
       <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <i class="font-icon-dots-vert-square"></i> 
       </button> 
       <div class="dropdown-menu dropdown-menu-right"> 
        <a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a> 
        <a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a> 
        <a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a> 
       </div> 
      </div> 
      <div class="task-card-title"> 
       <a href="#">Create new webpage for sales and marketing stuff</a> 
       <span class="task-card-title-label">(BIG)</span> 
      </div> 
      <div class="progress-compact-style"> 
       <progress class="progress" value="25" max="100"> 
        <div class="progress"> 
         <span class="progress-bar" style="width: 25%;">25%</span> 
        </div> 
       </progress> 
       <div class="progress-compact-style-label">37% done</div> 
      </div> 
      <div class="task-card-tags"> 
       <a href="#" class="label label-light-grey">Default</a> 
       <a href="#" class="label label-light-grey">Primary</a> 
       <a href="#" class="label label-light-grey">Success</a> 
      </div> 
     </div> 
     <div class="task-card-footer"> 
      <div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div> 
      <div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div> 
      <div class="avatar-preview avatar-preview-32"> 
       <a href="#"> 
        <img src="img/photo-64-2.jpg" alt=""> 
       </a> 
      </div> 
     </div> 
    </section><!--.task-card--> 
</div>