Pourquoi dois-je ajouter un rembourrage <body> lors de l'utilisation d'une position fixe en haut dans la barre de navigation de Bootstrap?

J'utilise la dernière version de Bootstrap pour le style d'un site et je suis tombé sur ce qui semble être un bug. Vous pouvez voir ici comme un JSFiddle.

Si j'ajoute un standard fixe position de la barre de navigation en haut et puis un peu de contenu après cela, le contenu est tiré vers le haut par les propos de 60px de sorte qu'il finit par sous la barre de navigation en haut. J'ai donc regardé la Bootstrap exemples de pages et a trouvé un peu de CSS (dans la section d'en-tête) qui est, de toute évidence être utilisés pour corriger cela:

body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

Cela m'étonnait beaucoup, et je me demande si c'est le résultat d'un négligé-correction d'un bug dans le Bootstrap ou si je devrais être en train de faire cela comme une question de cours.

Si ce dernier est le cas, je serais très intéressé de savoir pourquoi je devrais utiliser du CSS lors de l'Amorçage est censé être un prêt-à-go CSS solution.

Et si le premier cas, j'aurais beaucoup aimé savoir pourquoi c'est comme ça - et pourquoi ne pas le Bootstrap CSS il suffit d'ajouter le rembourrage pour le bas de la barre de navigation ou quelque chose?

OriginalL'auteur indra | 2012-09-27

  1. 5

    De la la documentation:

    Ajouter .navbar-fixed-top et n'oubliez pas de compte pour la zone cachée en dessous, en ajoutant au moins 40px rembourrage pour le <body>. Assurez-vous d'ajouter ce après la base de Bootstrap CSS et avant que l'option responsive CSS.

    La .navbar-fixed-top est position: fixed, donc un padding n'affectera aucun autre élément.

    MODIFIER

    "Entre les deux .css" conseils aide à prévenir un problème avec les appareils mobiles. Comme position: fixed est cassé sur de nombreux appareils, navbar va static et la <body> rembourrage crée un vide écharpe sur le haut. Donc bootstrap-responsive.css remplace ce rembourrage pour que les fenêtres.

    Vous pouvez reproduire ce comportement en ajoutant simplement une requête de média à la règle:

    @media (min-width: 979px) {
    body {
        padding-top: 60px;
    }
}

    Inclure cette règle sur votre feuille de style personnalisée et d'oublier <style> balises.

    Ok. Cela semble être une très hacky façon de faire les choses - ne sont pas des styles en ligne mal ...?
    Qui a dit inline? Add this after the core Bootstrap CSS and before the optional responsive CSS de sorte qu'il devrait être ajouté dans un fichier séparé ou un <style> tag.
    Désolé je voulais dire inline comme dans inline '<style>' balises. J'ai essayer et de garder tout mon CSS dans des fichiers externes - l'intégration de la css dans la balise HEAD sur la page d'Exemple m'inquiète.
    Vous n'avez pas besoin de toucher, de bootstrap.css, je vais modifier pour montrer comment
    ne voyez toujours pas pourquoi il n'était pas présent.” Voulez-vous dire que vous attendez de bootstrap.css à inclure body {padding-top:60px;}? Je ne sais pas Bootstrap, mais je suppose que l'utilisation d'un position de la barre de navigation est facultatif. Si vous n'utilisez pas la position de la barre de navigation, vous ne voulez pas un supplément de 60 pixels de haut rembourrage sur votre élément de corps.

    OriginalL'auteur albertedevigo

  2. 4

    Si vous n'avez pas l'ajout d'une barre de navigation, le rembourrage n'est pas nécessaire. Bootstrap lui-même ne peut pas savoir si c'est le cas ou pas, si vous avez besoin de mettre ce petit CSS peu de vous-même.

    Alors, pourquoi ne pas simplement ajouter un remplissage en bas de la barre de navigation?
    Vous ne voulez pas un remplissage en bas de la barre de navigation, mais un rembourrage sur le corps, si une barre de navigation existe.
    lorsqu'un élément est donné position:fixed dans le CSS, il cesse de prendre de l'espace dans le flux de documents (il sorte de se trouve sur le dessus de l'autre le contenu du document à la place). Cela provoque l'effet que vous décrivez quand vous dites, “le contenu est tiré vers le haut par les propos de 60px de sorte qu'il se termine sous la barre de navigation en haut”. L'ajout de remplissage en bas de la barre de navigation ne serait pas changer cela, parce que la barre de navigation n'est pas affecter le flux de document quand il a position:fixed.

    OriginalL'auteur Quentin Pradet

  3. 2

    À partir de la documentation:

    Ajouter .navbar-fixed-top et n'oubliez pas de compte pour la zone cachée en dessous, en ajoutant au moins 40px rembourrage pour le <body>. Assurez-vous d'ajouter ce après la base de Bootstrap CSS et avant que l'option responsive CSS.

    http://twitter.github.com/bootstrap/components.html

    OriginalL'auteur XMen