twitter-bootstrap - Bootstrap 3 中的容器，完美适应观看者屏幕尺寸的 HEIGHT

Question

这是问题所在。

我用 bootstrap 3.0对于一个非常非常基本的网站。不过，我想添加一些改进，但我需要帮助。

网站的结构非常基本:a container和几个 jumbotrons容器内。

我想让每个 Jumbotron 完美地拉伸(stretch)到用户浏览器窗口的高度，这样无论媒体是什么(智能手机、网络等)，访问者都会看到 完全且仅 一个 jumbotron 无需用鼠标向下滚动...

你有想法吗？
非常感谢!! ;)

Answer 1

您可以添加 special容器的 CSS 类并将其设置为 100% 高度。 HTML 和 BODY 也必须是 100% 高度...

html,body {height:100%;}
.special,.special .jumbotron {height:100%;}

演示: http://bootply.com/80826

然而，这并没有解决一次只能看到 1 个 jumbotron 的问题。这更多的是导航问题而不是大小问题。如果您根本不希望用户向下滚动，您可能希望为 jumbotrons 使用轮播。