Bonne façon d'ajouter un rembourrage pour Bootstrap corps pour empêcher le contenu d'en-tête et se chevauchent
Je comprends que pour arrêter le conteneur principal dans le Bootstrap d'être dans le haut du corps, et derrière la barre de navigation, vous devez ajouter le remplissage de la sorte:
<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 doivent être déclarées entre le bootstrap.css et bootstrap-responsive.css pour que le rembourrage de ne pas causer de problèmes sur les appareils de petite taille et donc la rupture de la réactivité du site.
Ma Question:
Je suis en utilisant le combinde bootstrap.fichier css chargé de Bootstrap personnaliser, qui a de la réactivité et de la normale css combiné en un seul fichier.
Parce qu'ils sont combinés en un seul fichier, ça signifie que je ne peux pas utiliser la solution que j'ai décrit au début de cette question, sans ajouter le correctif dans le bootstrap.fichier css (je ne veux pas ajouter de là, c'est une longue histoire).
Je pensais donc au lieu de mettre ce code (avec un @media fixer 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 le bootstrap.css, du html, comme ceci:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
Pensez-vous de cette solution est acceptable?
Vous devez vous connecter pour publier un commentaire.
Oui, votre solution est acceptable.
Donc, si vous avez le combiné d'un ou deux fichiers d'Amorçage dans le début et vous aimeriez avoir la barre de navigation, c'est la façon d'éviter les grandes remplissage lorsque sur de plus petits écrans:
@media (max-width: 979px) {
depuis twitter bootstrap passe en mode par défaut de 980px et jusqu'. Voir twitter.github.io/bootstrap/échafaudage.html#responsive@media (min-width: 768px) and (max-width: 979px) { ... }
Dans Le Bootstrap 2.3.x, nous pouvons résoudre ce rembourrage avec CSS:
avec un fichier HTML ressembler à ceci
Dans Twitter responsice un fichier CSS pour le menu du haut de la ligne a
class="navbar-fixed-top"
avecmargin-bottom: 20px;
lorsque la largeur de l'écran moins de980px
.Espère que cela peut aider quelqu'un.