引导网格卡

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