web-dev-qa-db-fra.com

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 éléments de navigation standard et j'aimerais inclure un bouton pour se connecter et s'inscrire.

J'utilise une balise a avec la balise btn btn-large btn-success classes et par défaut, il semble que la barre de navigation n'accepte pas l'utilisation de btns imbriqués.

Le résultat est quelque chose comme ceci:

default without hover

Et une fois survolé, il se présente comme:

hovered

Ma question est essentiellement: est-ce que je fais mal? Y a-t-il quelque chose qui me manque?

J'ai pensé demander avant de redéfinir les classes CSS pour .btn. dans une barre de navigation.

Merci.

csscss3navigationtwitter-bootstrapcss-frameworks
61
Mario Zigliotto

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 exemple de barre de navigation statique sur la page Bootstrap :

Buttons added to the navbar.

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

<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 des écrans plus petits, placez simplement vos liens de bouton d'un niveau vers le haut, dans <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 qui ne devraient pas l'être.

63
Jared Harley

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

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

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 une liste déroulante 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>
6
Mario Zigliotto
<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>
1
24inwork

J'ai eu le même problème lors de la mise du .btn dans la barre de navigation, 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: survolez à nouveau dans main.css -> le fichier de styles personnalisés de l'application, placé en tête après bootstrap.css, de cette façon, cela a fonctionné, car si vous inspectez l'élément dans firebug ou l'un des outils de développement et essayez de le survoler, vous remarquerez que le style de survol .btn est réécrit par nav hover style, qui est placé après les boutons dans le fichier bootstrap.css ...

0
bblokar