在导航栏下的Bootstrap jumbotron

Question

我正在努力实现这一目标：

http://unity3d.com/community

导航栏下的全宽标题图像：实现此目的的最佳Bootstrap 3方法是什么？

我可以使用本教程将jumbotron移动到主容器外：

http://www.tutorialspoint.com/bootstrap/bootstrap_jumbotron.htm

现在的挑战是将导航栏移回到页面顶部的原始位置（它当前显示在jumbotron之后）

感谢。

Answer 1

尝试添加一些自定义CSS和HTML：

HTML：

<div class="background-image"> </div> /!-- Make sure it is right under the closing head tag! --!/

CSS：

.background-image {

    height: 400px;
    background-image: url('community.jpg');
    width: 100%;
    position: absolute;
    top:0;
    z-index: -100;


}

在您的背景div之后，您可以放置​​您的jumbotron并进行自定义。确保您的图像足够宽（1920px是一个很好的宽度），以便它在所有分辨率上看起来都很好。此外，高度必须固定，否则图像将占用整个页面。