Question

enter image description here 我想创建一个像这个图像的布局，但我的问题是％盒子高度和粘性页脚！

        row_slave.getCell(0).getCellComment().getString()

框高不会达到容器的50％（减去页眉和页脚）

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

按钮网格布局与twitter bootstrap

1 个答案: