Bootstrap jumbotron under nav bar

问题:

I am trying to accomplish this:

http://unity3d.com/community

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

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

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

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)

Thanks.

回答1:

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;


}

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.