ブートストラップにカードをラップ（フロート）する方法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"

カードを3列に並べ、画面サイズが小さい場合は1列に並べ替えます。

Bootstrap Docs on card-columns

Answer 2

ソリューション... はこれをacheiveするブートストラップ行とCOLのを使用して、コードの下に従ってください。

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

    } 
</style> 

使用例：

<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

私が働く浮動カードクラスを思い付いた

<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>