Bootstrap网格系统填满所有空间

Question

我希望网格填满所有空间，例如

而不是

我的例子有固定数量的Panels，我的项目没有..

＆＃13;

＆＃13;

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
           <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你不能使用Bootstrap本地执行此操作，因为浮点数不会以这种方式对齐。但是，有一些插件可以让您以这种方式进行对齐。一个非常好的是Masonry。

Here is a Demo Masonry

以基本形式使用非常简单：

<div class="container" data-masonry='{ "itemSelector":".col-sm-4", "fitWidth": true }'>