带卡片的引导网格

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

我通常不使用引导程序。但我相信你要找的是 Masonry 系统，它也可以在 bootstrap 上找到。

这里为你：

引导说明

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