简体   繁体   中英

div doesn't position itself below bootstrap fixed navbar

I have been using bootstrap's navbar css. Below this navbar I have a which I want to put below the navbar. However, why does it always start at the top and not below the navbar? I've looked at twitter bootstrap's example and they were able to have a positioned below the fixed navbar. Here's the link to my website . Any idea why this is?

Here's the html that I have now:

<div class="navbar navbar-fixed-top">
</div>

<section id="main">

</section>

The fixed navbar will overlay your other content, unless you add padding to the top of the <body> . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

 body { padding-top: 70px; } 

Make sure to include this after the core Bootstrap CSS.

ref: http://getbootstrap.com/components/#navbar-fixed-top

I dont know why they dont put this note in bootstrap 2.3.2 but this is what you want. :)

Yesterday I fix my navbar and set the container as following

.maincontainer{ padding-top: 75px; }

75 pixel is enough and doesn't affect Bootstrap on Responsive design in Tablet and Mobile. Work perfect everywhere :)

Just use the <nav> tag instead of <div class="nav"> . It'll take care of it.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM