Comment puis-je corriger mon code Bootstrap 3 RC1 navbar HAML pour qu'il fonctionne dans les vues étroites/mobiles?

Question

J'utilise le code HAML suivante pour générer un 2.xy Bootstrap navbar:

.navbar.navbar-fixed-top.navbar-inverse 
    .navbar-inner 
     .container 
      %a.brand{:href => '/'} xyz.com 
      %ul.nav 
       %li 
        %a{:href => '/'}Home 
       %li 
        %a{:href => '/blog'}Articles 
       %li 
        %a{:href => '/research'}Research 
       %li 
        %a{:href => '/contact'}Contact 
       %li 
        %a{:href => '/gallery',}Gallery 

vu dans une fenêtre de navigateur étroite ou sur un téléphone mobile, les éléments de la barre de navigation étaient bien empilées comme représenté sur la capture d'écran :

Je viens d'essayer la mise à niveau mon projet bootstrap 3. Je suis maintenant en utilisant ce code HAML pour la barre de navigation:

.navbar.navbar-fixed-top.navbar-inverse 
    .container 
     %a.navbar-brand{:href => '/'} xyz.com 
     %ul.nav.navbar-nav 
      %li 
       %a{:href => '/'}Home 
      %li 
       %a{:href => '/blog'}Articles 
      %li 
       %a{:href => '/research'}Research 
      %li 
       %a{:href => '/contact'}Contact 
      %li 
       %a{:href => '/gallery',}Gallery 

Cependant, la barre de navigation ne fonctionne pas comme avant maintenant (voir deuxième capture d'écran):

Comment puis-je corriger le code HAML pour revenir à l'ancien comportement en utilisant bootstrap 3 RC1?

Answer 1

Alors que Bootstrap 3.0 est en RC1, la version par défaut disponible contient css pour une barre de navigation réactive (cela peut aussi être vrai pour les versions futures aussi)

Line 2922: http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css contient la requête des médias pour min-largeur de 768px .

Vous pouvez ajouter manuellement le css qui fait les éléments d'affichage navbar afficher en ligne à votre code:

<style> 
.navbar-brand { 
    float: left; 
    margin-right: 5px; 
    margin-left: -15px; 
} 
.navbar-nav { 
    float: left; 
    margin-top: 0; 
    margin-bottom: 0; 
} 
.navbar-nav > li { 
    float: left; 
} 
.navbar-nav > li > a { 
    border-radius: 0; 
} 
.navbar-nav.pull-right { 
    float: right; 
    width: auto; 
} 
.navbar-toggle { 
    position: relative; 
    top: auto; 
    left: auto; 
    display: none; 
} 
.nav-collapse.collapse { 
    display: block !important; 
    height: auto !important; 
    overflow: visible !important; 
} 
</style> 

Answer 2

Avez-vous inclus dans votre tel que décrit par http://getbootstrap.com/getting-started/? J'ai eu le même problème w/o cette balise après la migration de 2,3

% meta {nom: 'viewport', contenu: 'width = dispositif de largeur, initiale échelle = 1,0'}