Twitter Bootstrap: Quelle est la bonne façon d’utiliser la classe `.btn` dans une barre de navigation?

J’utilise une barre de navigation pour les trucs de navigation standard et j’aimerais inclure un bouton pour vous connecter et vous inscrire.

Le j’utilise a balise avec les classes btn btn-large btn-success et par défaut, il apparaît que la barre de navigation ne permet pas l’utilisation de btn s nesteds.

Le résultat est quelque chose comme ceci:

défaut sans vol stationnaire

Et quand il passe au-dessus, il ressort comme:

plané

Ma question est essentiellement la suivante: est-ce que je me trompe? Y a-t-il quelque chose qui me manque?

Je pensais demander avant de redéfinir les classes CSS pour .btn. dans une barre de navigation.

Merci.

La barre de navigation contient des boutons sans problème – j’ai des boutons dans la barre de navigation sans aucun problème, et j’ai pu les append à l’ exemple de la barre de navigation statique sur la page Bootstrap :

Boutons ajoutés à la barre de navigation.

Le html devrait être présenté comme ceci:

  

Si vous n’utilisez pas la disposition réactive pour réduire la barre de navigation sur des écrans plus petits, placez simplement vos liens de boutons à un niveau supérieur, dans

.

Si vous ne trouvez toujours pas le problème, essayez d’utiliser les outils de développement de Chrome pour voir quels CSS sont appliqués aux boutons qui ne devraient pas l’être.

Comme discuté ici , Envelopper le lien avec une div fonctionne:

  

Voici une version modifiée de la réponse de Jared Harley. C’est ce que j’ai finalement utilisé et il prend en charge d’avoir un menu déroulant dans la barre de navigation.

  

J’ai eu le même problème en mettant le .btn dans navbar, et quand j’ai survolé, il a “coupé” la moitié du bouton bg, je l’ai résolu de cette façon que j’ai déclaré .nav> li> a.btn: reviens dans main.css -> le fichier de styles personnalisé de l’application, placé en tête après bootstrap.css, de cette façon, car si vous inspectez un élément de Firebug ou l’un des outils de développement et que vous essayez de le survoler, vous remarquerez que le style de survol .btn est réécrit par style de survol de navigation, qui est placé après les boutons dans le fichier bootstrap.css …

J’ai corrigé cela en ajoutant ceci dans:

 style="margin-top:10px;" 

Le code du bouton complet ressemble à ceci: