css - Bootstrap 3 排垂直流体卡

Question

在我的模板中，我有下一个结构:

<div class="container">
    <div class="row">
      <div class="col-lg-3">some content</div>
      <div class="col-lg-9">
        <div class="row">
          <div class="col-lg-4">cards with different height</div>
          ... about 15-20 cards with same width and different height
        </div>
      </div>
    </div>
  </div>
</div>

每行 3 张卡片与最高的卡片对齐，如下所示:

*** *** ***
*** *** ***
***     ***

*** *** ***
*** *** ***
*** *** 
    ***

*** *** ***
...

但我需要流畅的垂直对齐:

*** *** ***
*** *** ***
***     ***
    ***
*** *** ***
*** *** ***
*** ***
        ***
*** ***
...

是否有 Bootstrap 或简单的自定义方法来执行此操作？

Answer 1

<div class="container">
   <div class="row">
     <div class="col-sm-3">some content, all right with this part</div>
     <div class="col-sm-9">
       <div class="row">
         <div class="col-sm-4">
           <div class="card high">1</div>
           <div class="card high">4</div>
       </div>
         <div class="col-sm-4">
           <div class="card low">2</div>
           <div class="card high">5</div>
       </div>
         <div class="col-sm-4">
           <div class="card high">3</div>
           <div class="card low">6</div>
       </div>
     </div>
  </div>
</div>

col-lg-3 中没有任何内容，所有内容都在col-lg-9 中。按照发布的方式使用您的代码，不会有流畅的垂直对齐方式。您是否正在寻找 Masonry布局？