Bootstrap网格:连续多个div的垂直放置?

时间:2016-02-28 21:14:31

标签: css twitter-bootstrap

在Bootstrap .row中,我有一个任意数量的div(类col-xs-12 col-sm-6 col-md-4 col-lg-3),每个div都有自己的高度。

结果(在大屏幕上)就像这张图片(.row为红色,.col为黑色):

bad grid

我希望每个div尽可能高,就在它上面的div下方,如下图所示。这是可能的Bootstrap,而不必手动将我的div排序成列?

good grid

这是我的代码:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  ...
</div>

1 个答案:

答案 0 :(得分:0)

Bill Reinhardt创建了一个很好的布局供你开始。

这可以帮到你: https://codepen.io/billreinhardt/pen/ZGVNJL

<强> HTML:

<div class="container">
    <h1>Masonry CSS with Bootstrap</h1>
    <div class="row">
<div class="item">
  <div class="well"> 
    1 blah blah blah
  </div>
</div>
<div class="item">
    <div class="well"> 
    2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
    3 blah blah blah blah blah blah blah blah h
    </div>
</div>
<div class="item">
    <div class="well">
    blah blah blah blah 
    </div>
</div>
<div class="item">
    <div class="well"> 
      blah blah blah. The container inside the item must be position:relative
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well">
    blah blah blah blah blah blah blah blah h
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
      blah blah blah. The container inside the item must be position:relative
    </div>
</div>

    

<强> CSS:

.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;
}