Twitter Bootstrap Responsive Navbar Cassé sur les Petits Écrans
J'ai lu les docs et en comparant mon code pour l'Amorçage d'exemples, mais je ne peux pas comprendre pourquoi la barre de navigation sur mon site tombe sur 100px quand je fais ma fenêtre de navigateur les plus petits ou les afficher sur un téléphone.
http://warm-ocean-8133.herokuapp.com/
Voici mon code html dans le modèle jade format.
.navbar.navbar-fixed-top
.navbar-inner
.container
a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
span.icon-bar
span.icon-bar
span.icon-bar
a.brand(href='#home') Miles Matthias
.nav-collapse
ul.nav
li.active
a(href='#home') Home
li
a(href='#contact') Contact
OriginalL'auteur Miles | 2012-04-17
Vous devez vous connecter pour publier un commentaire.
Visual anomalie s'affiche car vous avez défini le haut de rembourrage pour les
body
élément après y compris labootstrap-responsive.css
fichier, ce qui signifie que le "responsive" styles sont incapables de remplacer votre padding:Vous voulez le rembourrage pour être utilisé lors de l'affichage de la page en pleine largeur (de sorte que votre contenu n'est pas affiché en dessous de la barre de navigation en haut), mais vous voulez que le "responsive" styles de remplacer le rembourrage lorsque vous réduisez la largeur du navigateur (ou l'affichage de la page sur un appareil mobile).
Donc la solution est simple: définir le haut de rembourrage pour les
body
élément entre votre intégration debootstrap.css
etbootstrap-responsive.css
.Les échantillons Bootstrap sont un excellent modèle à utiliser pour commencer. Le design fluide site-t-il comme ceci:
J'ai utilisé la base de Bootstrap exemple qui fait déjà cela, mais il n'a toujours pas à résoudre mon problème. La méthode ci-dessous fonctionne.
Si vous utilisez la personnalisation de l'outil sur le Bootstrap site pour obtenir l'ensemble du paquet, puis cela comprend déjà la réponse sections trop, rendant impossible pour insérer le rembourrage des instructions entre le principal et réactif sections. Ou ai-je mal compris quelque chose?
OriginalL'auteur Cody Gray
Vous pouvez utiliser @media à remplacer le corps de rembourrage.
Comme ceci:
@media (min-width: 768px) and (max-width: 979px) { ... }
OriginalL'auteur trgoofi