Twitter Bootstrap inline css voor de navbar-fixed-top weghalen

Door 15 november 2012Tips & Trucs

Zoals aangegeven in de documentatie van het Twitter Bootstrap:

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

Wat er zo uit zou zien:

<link href="css/bootstrap.css" rel="stylesheet">
<style>
body { padding-top: 40px; }
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">

Niet echt netjes!  Beter zet je het volgende in je eigen stylesheet:

body { padding-top: 40px; }
@media screen and (max-width: 979px) {
 body { padding-top: 0px; }
}

En kan je het gewoon weglaten:

<!-- Twitter Boostrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- Eigen CSS -->
<link href="css/main.css" rel="stylesheet">