web-dev-qa-db-fra.com

Bootstrap 3 NAVBAR-FRAND-TOP-TOP STY FORMÉ EN VUE MOBILE

Cela peut être un bug ou juste mon mauvais codage. J'ai construit un site Web à l'aide de Twitter bootstrap 2.3. * Et trouvé aucun problème, en particulier pour la fonction réactive. Le problème est arrivé lorsque j'ai essayé de passer à bootstrap 3.rc-2 qui était la dernière version stable (selon Wikipedia ). J'ai également essayé avec les exemples contenus dans le téléchargement et j'ai le même résultat lorsque j'ai essayé de redimensionner la fenêtre.

S'il vous plaît jeter un oeil sur http://bootply.com/6986 Pour l'exemple et essayez de redimensionner le navigateur de la fenêtre puis cliquez sur la vue Render et essayez de développer le menu et faites défiler la page.

Ma vraie question est comment puis-je créer la barre de navigation fixe statique lors d'une vue mobile (pliée)?

htmlcsstwitter-bootstraptwitter-bootstrap-3
10
gema

.navbar-fixed-top Garde la barre de navigation de la barre Navalise pour toutes les tailles d'écran maintenant. Ce sera la valeur par défaut. Lorsque vous jetez un coup d'œil à NAVBAR.less, vous ne verrez aucune requête de média ne sera également appliquée sur cette classe.

Pour rendre la barre NAVA STATIQUE après que l'effondrement ajoutez le CSS indiqué ci-dessous après la BOOSTRAP CSS:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
    .navbar-fixed-top
    {
    position: relative;
    top: auto;
    }
}
17
Bass Jobsen

De plus, à ce que BASS JOBEN a mentionné, pour une meilleure convivialité sur mobile, l'extrait de CSS suivant supprime le "sous-défilement" dans la barre de navigation et supprime la marge supérieure qui est là en raison de la barre de navigation fixe à grande écran:

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}
15
DarkScrolls