引導網格卡

Question

看看我的小提琴：

https://jsfiddle.net/bzhd01qr/1/

我用卡此佈局：

<div class="col-lg-3"> 
     <div class="bs-component"> 
      <div class="card text-white bg-primary"> 
       <div class="card-body"> 
        <blockquote class="card-blockquote"> 
         <p>Card 1</p> 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 

目前，我有一個主與我有什麼至今。每張卡片之間的間隔，水平和垂直。它應該都是相同的（例如5px）。所以這基本上意味着：

1. 在外面的空間是好的（左，上邊距和右）
2. 之間的空間，例如卡1和卡2是太多了。
3. 卡1和卡4之間的空間太大。
4. 沒有空間可言卡3卡7

理想的解決方案之間是這樣的：

就如何解決這些問題的任何指針？

Answer 1

我通常不使用引導程序。但我相信你所尋找的是砌體系統，它也可以在引導程序上使用。

這裏爲您提供：

Bootsrap

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

HTML

<div class="container"> 
    <h1>Masonry</h1> 
<div class="row"> 
    <div class="item col-lg-3"> 
     <div class="well"> 
     <p>Card 1</p> 
     </div> 
    </div> 
    <div class="item col-lg-6"> 
     <div class="well"> 
     <p>Card 2</p> 
     <p>Card 2</p> 
     </div> 
    </div> 
    <div class="item col-lg-3"> 
     <div class="well"> 
     <p>Card 3</p> 
     <p>Card 3</p> 
     <p>Card 3</p> 
     </div> 
    </div> 
    <div class="item col-lg-3"> 
     <div class="well"> 
     <p>Card 4</p> 
     </div> 
    </div> 
    <div class="item col-lg-3"> 
     <div class="well"> 
     <p>Card 5</p> 
     </div> 
    </div> 
    <div class="item col-lg-3"> 
     <div class="well"> 
     <p>Card 6</p> 
     </div> 
    </div> 
    <div class="item col-lg-3"> 
     <div class="well"> 
     <p>Card 7</p> 
     </div> 
    </div> 
</div> 
</div> 

CSS

*, 
*:before, 
*:after { 
    box-sizing: border-box !important; 
} 
.row { 
    -moz-column-width: 18em; 
    -webkit-column-width: 18em; 
    column-width: 18em; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
    column-gap: 1em; 
} 
.item { 
    display: inline-block; 
    padding: .25rem; 
    width: 100%; 
} 
.well { 
    position: relative; 
    display: block; 
} 

工作小提琴：fiddle