css - Bootstrap 网格系统填充所有空间

Question

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

不是

我的示例有固定数量的面板，我的元素没有..

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

Answer 1

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

Here is a Demo砌体

它的基本形式使用起来非常简单:

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