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

Question

J'utilise une barre de navigation pour les fonctions de navigation standard et j'aimerais inclure un bouton pour s'inscrire et s'enregistrer.

J'utilise un a avec la balise btn btn-large btn-success et, par défaut, il semble que la barre de navigation ne permette pas l'utilisation de classes imbriquées. btn s.

Le résultat est à peu près le suivant :

Et lorsqu'il est survolé, il apparaît comme suit :

Ma question est la suivante : Est-ce que je m'y prends mal ? Y a-t-il quelque chose qui m'échappe ?

J'ai pensé poser la question avant de redéfinir les classes CSS pour les .btn. à l'intérieur d'une barre de navigation.

Merci.

Answer 1

La barre de navigation accepte les boutons sans problème - j'ai des boutons dans la barre de navigation sans aucun problème, et j'ai pu les ajouter à la section exemple de barre de navigation statique sur la page Bootstrap :

Le code html doit être présenté comme suit :

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
    </div>
  </div>
</div>

Si vous n'utilisez pas la mise en page réactive pour réduire la barre de navigation sur les petits écrans, placez simplement vos liens de bouton un niveau plus haut, dans la section <div class="container"> .

Si vous ne trouvez toujours pas le problème, essayez d'utiliser Outils de développement de Chrome pour voir quel CSS est appliqué aux boutons alors qu'il ne devrait pas l'être.

Answer 2

Comme nous l'avons vu aquí Le fait d'entourer le lien d'une div fonctionne :

<div><a class='btn' href='#'>Link</a></div>

Answer 3

Voici une version modifiée de la réponse de Jared Harley. C'est ce que j'ai finalement utilisé et cela permet d'avoir un menu déroulant dans la barre de navigation.

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
      <div class="pull-right">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">item</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">another item</a>
              </li>
            </ul>
          </li>
          <li class="divider-vertical"></li>
        </ul>
        <a class="btn btn-primary" href="#">Primary</a>
        <a class="btn btn-success" href="#">Success</a>
      </div>
    </div>
  </div>
</div>

Answer 4

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Brand name</a>
            <ul class="nav">
                <li class="active"><a href="#">Main</a></li>
                <li><a href="#about">Next one</a></li>
            </ul>

            <div class="btn-group pull-right">
                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

Answer 5

J'ai eu le même problème en mettant le .btn dans la navbar, et quand je le survolais, il "coupait" la moitié du bg du bouton, j'ai résolu le problème en déclarant .nav > li > a.btn:hover à nouveau dans main.css -> le fichier des styles personnalisés de l'application, placé dans le head après bootstrap. css, cela a fonctionné, car si vous inspectez l'élément dans firebug ou n'importe quel outil de développement et que vous essayez de le survoler, vous remarquerez que le style de survol de .btn est réécrit par le style de survol de nav, qui est placé après les boutons dans le fichier bootstrap.css...