带卡的

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

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

给你：

<强> 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