带有 twitter bootstrap 的按钮网格布局答案

【问题标题】：Button grid layout with twitter bootstrap带有 twitter bootstrap 的按钮网格布局
【发布时间】：2016-05-11 00:45:06
【问题描述】：

enter image description here 我想创建一个像这张图片一样的布局，但是我遇到了盒子高度和粘页脚的问题！

<!-- 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%（减去页眉和页脚）

【问题讨论】：

标签： twitter-bootstrap layout grid

【解决方案1】：

对于您面临的高度和装订线空间问题，您使用的引导网格结构几乎没有问题，这也是它在您的页面上呈现不佳的原因。您的外部网格布局应如下所示。我在Codepen 或JSFiddle 上有我完整的更新代码，无论你喜欢哪一个:-)

修改后的 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">...</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 代码

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

对于粘性页脚，添加可用的引导类 navbar-default navbar-fixed-bottom。像这样更新页脚代码。

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

【讨论】：