Bonne façon d'ajouter un remplissage au corps de Bootstrap pour éviter le chevauchement du contenu et de l'en-tête
Je comprends que pour empêcher le conteneur principal dans Bootstrap d'être en haut du corps, et derrière la barre de navigation, vous devez ajouter un rembourrage comme suit:
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
Le remplissage doit être déclaré entre le bootstrap.css et le Bootstrap-responsive.css afin que le remplissage ne provoque pas de problèmes sur les appareils plus petits et rompant ainsi la réactivité du site.
Ma Question:
J'utilise le bootstrap combinde.fichier css chargé à partir de Bootstrap personnalisez , qui a le CSS réactif et le CSS normal combinés en un seul fichier.
Parce qu'ils sont combinés en un seul fichier, cela signifie que je ne peux pas utiliser la solution que j'ai décrite au début de cette question sans ajouter réellement le correctif dans le bootstrap.fichier css (Je ne veux pas l'ajouter là-dedans, longue histoire).
Donc, je pensais au lieu de mettre ce code (avec un correctif @media pour les petits appareils):
body { padding-top: 60px; }
@media (max-width: 979px) { body { padding-top: 0; } }
Dans mon propre fichier css (principale.css) et y compris après bootstrap.css, dans le html, comme ceci:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
pensez-vous que cette solution est acceptable?
2 réponses
Oui votre solution est acceptable.
Donc, si vous avez le combiné ou les deux fichiers Bootstrap au début et que vous souhaitez avoir la barre de navigation, c'est le moyen d'éviter le grand remplissage sur des écrans plus petits:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
}
@media (max-width: 980px) {
body {
padding-top: 0;
}
}
</style>
Dans Bootstrap 2.3.x nous pouvons corriger ce remplissage avec CSS:
body > .container {
padding-top: 40px;
background-color: white;
}
/*
* Responsive stypes
*/
@media (max-width: 980px) {
body > .container {
padding-top: 0;
}
.navbar-fixed-top {
margin-bottom: 0;
}
} /* END: @media (max-width: 980px) */
Avec le fichier HTML ressembler à ceci
<html>
<body>
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container">
...
</div>
</body>
</html>
Dans le fichier CSS Twitter responsice, la ligne de menu supérieure a class="navbar-fixed-top" avec margin-bottom: 20px; lorsque la largeur de l'écran est inférieure à 980px.
Espère que cela peut aider quelqu'un.