CSS Bootstrap面板差距 - 像Pinterest一样

Question

我有一些div面板，当每个面板右侧的列大于最后一列时，左边有一个间隙。

我怎样才能让它落在每一个之下（如pinterest）

JSFiddle Example

WHERE JSON_CONTAINS(keywords, '["php","css"]')

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>