Twitter bootstrap 带twitter引导的按钮网格布局

我想创建一个类似于此图像的布局，但我遇到了框高%和页脚粘滞的问题

<!-- HEADER START-->
<div class="container-fluid">
    <div class="row" style="vertical-align: middle">
      <div class="col-xs-4"><strong>text left</strong></div>
      <div class="col-xs-4" style="text-align: center">text center</div>
      <div class="col-xs-4" style="text-align: right">text right</div>
    </div>
</div>
<!-- END HEADER -->

<!-- GRID START -->
<div class="container-fluid">
    <div class="row flush-col" style="height:50% !important">
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
    </div>
    <div class="row flush-col" style="height:50% !important">
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-xs-6 col-sm-3">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
    </div>
</div>
<!-- END GRID -->

<!-- FOOTER START -->
<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>
<!-- END FOOTER -->

文本左侧
文本中心
文本权限
箱名
箱体
箱脚
箱名
箱体
箱脚
箱名
箱体
箱脚
箱名
箱体
箱脚
箱名
箱体
箱脚
箱名
箱体
箱脚
箱名
箱体
箱脚
箱名
箱体
箱脚
将粘性页脚内容放在此处

• 框高度不能调整为容器的50%（减去页眉和页脚）

---

对于您面临的高度和排水沟空间问题，您使用的引导网格结构有点问题，原因是它不能在页面上很好地呈现。您的外部网格布局应该如下所示。我在或上有完整的更新代码，以您喜欢的为准：-）

修改的网格结构

<!-- GRID START -->
<div class="container">
  <div class="row first-row text-center">
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
    <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">...</div>
  </div>
</div>
<!-- END GRID -->

<!-- GRID START -->
<div class="container">
    <div class="row first-row text-center">
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
            <button class="btn btn-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Box Title
                    </div>
                    <div class="panel-body pheat-body">
                        Box Body
                    </div>
                    <div class="panel-footer">
                        Box Footer
                    </div>
                </div>
            </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
          <button class="btn btn-default">
            <div class="panel panel-default">
              <div class="panel-heading">
                Box Title
              </div>
              <div class="panel-body pheat-body">
                Box Body
              </div>
              <div class="panel-footer">
                Box Footer
              </div>
            </div>
          </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
          <button class="btn btn-default">
            <div class="panel panel-default">
              <div class="panel-heading">
                Box Title
              </div>
              <div class="panel-body pheat-body">
                Box Body
              </div>
              <div class="panel-footer">
                Box Footer
              </div>
            </div>
          </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
          <button class="btn btn-default">
            <div class="panel panel-default">
              <div class="panel-heading">
                Box Title
              </div>
              <div class="panel-body pheat-body">
                Box Body
              </div>
              <div class="panel-footer">
                Box Footer
              </div>
            </div>
          </button>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 bottom-gutter">
          <button class="btn btn-default">
            <div class="panel panel-default">
              <div class="panel-heading">
                Box Title
              </div>
              <div class="panel-body pheat-body">
                Box Body
              </div>
              <div class="panel-footer">
                Box Footer
              </div>
            </div>
          </button>
        </div>
     </div>
</div>
<!-- END GRID -->

<!-- FOOTER START -->
<footer class="footer">
  <div class="navbar-default navbar-fixed-bottom">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>
<!-- END FOOTER -->