Bootstrap jumbotron在导航栏下 [英] Bootstrap jumbotron under nav bar

问题描述

我想尝试完成此操作：

http：// unity3d.com/community

navbar下的全宽标题图片：什么是最好的Bootstrap 3方法来完成？

A full width header image under the navbar: what's the best Bootstrap 3 approach to accomplish this?

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

I was able to move the jumbotron outside the main container using this tutorial:

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

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

Now the challenge is to move the navbar back to it's original position at the top of the page (it is currently displayed just after the jumbotron)

谢谢。

推荐答案

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

Try adding up some custom CSS and 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;


}

你的jumbotron和自定义它。确保你的图像足够宽（1920px是一个好的宽度），所以它将看起来确定在所有分辨率。此外，高度必须固定，否则图片将占据整个页面。

After your background div, you can put your jumbotron and customize it. Make sure your image is wide enough ( 1920px is a good width) so that it will look ok on all resolutions. Also, the height must be fixed , otherwise the image is going to take up your whole page.

这篇关于Bootstrap jumbotron在导航栏下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！