Question

响应式网站的一种常见的现代设计技术是使用屏幕高度元素作为首屏内容包装器，并在下面提供所有其他内容。关于此技术的 Here's a good discussion 。这是 a demo at CodePen ：

   #video{
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }

如何使Bootstrap 3行以这种方式运行？

Answer 1

我正面临着这一挑战。这是我目前的解决方案。

.full-ht {
    height: 100vh;
    position: relative;
}
.full-ht-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    margin-left: -15px;
    padding-left: 15px;
}

<div class="container-fluid">
    <div class="row full-ht">
        <div lass="col-xs-12 full-ht">                
            <div id="page-top-content" class="full-ht-content">
                 Above-the-fold content.
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            Other content.
        </div>
    </div>
</div>

<强> Fiddle demo

如何使Bootstrap网格的顶行填满整个屏幕

1 个答案: