CSS Bootstrap 面板差距 - 像 Pinterest 一样制作

Question

我有一些 div 个面板，当右边的列比最后一个大时，每个面板的左边都有一个空隙。

我怎样才能把它放在每一个下面（比如 pinterest）

<div class="row">
<div class="col-xs-6">
   <div class=" panel">
      <div class="panel-body">
         <h4>First Cell</h4>
      </div>
   </div>
</div>
<div class="col-xs-6">
   <div class=" panel">
      <div class="panel-body">
         <h4>Second Cell</h4>
         <h4>Second Cell</h4>
         <h4>Second Cell</h4>
      </div>
   </div>
</div>
<div class="col-xs-6">
   <div class=" panel">
      <div class="panel-body">
         <h4>Third Cell</h4>
      </div>
   </div>
</div>
<div class="col-xs-6">
   <div class=" panel">
      <div class="panel-body">
         <h4>Third Cell</h4>
         <h4>Third Cell</h4>
         <h4>Third Cell</h4>
      </div>
   </div>
</div>
<div class="col-xs-6">
   <div class=" panel">
      <div class="panel-body">
         <h4>Third Cell</h4>
         <h4>Third Cell</h4>
         <h4>Third Cell</h4>
      </div>
   </div>
</div>

Answer 1

你可以像这样用另一种方式制作它（像 Pinterest）：

JsFiddle DEMO

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
      <div class="item">
         <div class="well">
            <h4>First Cell</h4>
         </div>
      </div>
      <div class="item">
         <div class="well">
            <h4>Second Cell</h4>
            <h4>Second Cell</h4>
            <h4>Second Cell</h4>
         </div>
      </div>
      <div class="item">
         <div class="well">
            <h4>Third Cell</h4>
            <h4>Third Cell</h4>
         </div>
      </div>
      <div class="item">
         <div class="well">
            <h4>Third Cell</h4>
            <h4>Third Cell</h4>
            <h4>Third Cell</h4>
         </div>
      </div>
      <div class="item">
         <div class="well">
            <h4>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laudantium veritatis expedita optio aperiam modi, odit eius
            </h4>
         </div>
      </div>
      <div class="item">
         <div class="well">
            <h4>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </h4>
         </div>
      </div>
   </div>
</div>

CSS Bootstrap 面板差距 - 像 Pinterest 一样制作

CSS Bootstrap Panel Gaps - Make like Pinterest

css

twitter-bootstrap

pinterest