css - 带卡片的 Bootstrap 网格

Question

看看我的 fiddle :

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. Card 1 和 Card 4 之间的空间太大。
4. Card 3 和 Card 7 之间没有任何空间。

理想的解决方案是这样的:

关于如何解决这些问题的任何指示？

Answer 1

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

在这里为你:

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 :fiddle