html - 如何使Bootstrap网格的第一行充满整个屏幕

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

#fullscreen {
    width: 100%;
    height: 100%;
    display: table;
}

#fullscreen .fullscreen-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

<div id="fullscreen">
    <div class="fullscreen-content">
    ...
    </div>
</div>

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

最佳答案

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

.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

关于html - 如何使Bootstrap网格的第一行充满整个屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31272202/