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张牌与最高牌对齐如下：

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

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

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

但我需要流体垂直对齐：

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

是否有引导或简单的自定义方式来执行此操作？

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布局？

Bootstrap 3垂直流体卡排

1 个答案: