Fil d'ariane dans une barre de navigation dans le bootstrap 3.0.2

Je suis nouveau sur Bootstrap, et je veux créer une barre de navigation avec des trucs (des liens, liste déroulante...) et un fil d'ariane. Mais j'ai un problème avec le display: block (je pense...) quand j'ai mis un fil d'ariane dans une barre de navigation, c'est mon exemple de code:

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">

        <ul class="nav navbar-nav navbar-right">
          <ul class="breadcrumb list-inline">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
          </ul>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello George <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Settings</a></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
          <li>
            <span class="glyphicon glyphicon-info-sign icons-padding"></span>
          </li>
          <li><a href="#">Help</a></li>
          <li>
            <span class="glyphicon glyphicon-off icons-padding"></span>
          </li>
          <li><a href="#">Exit</a></li>
        </ul>
      </div>
    </nav>

http://jsfiddle.net/calamarico/r9yEU/2/embedded/result/

Comment puis-je mettre inline le fil d'ariane et les autres trucs dans la même ligne?

OriginalL'auteur Kalamarico | 2013-11-28

18

Un simple float: left va faire le travail (les marges sont ici pour l'alignement vertical) :
```
.nav .breadcrumb {
    margin: 0 7px;
}
@media (min-width: 768px) {
    .nav .breadcrumb {
        float: left;
        margin: 7px 10px;
    }
}
```
Mis à jour le violon (J'ai également fixé votre icône de bug sur la version mobile)

Thx, j'ai adapter à mon besoin avec votre améliorer: jsfiddle.net/calamarico/r9yEU/7/embedded/result

OriginalL'auteur zessx

C'est ma solution, il fonctionne avec bouton à bascule et de l'effondrement div trop:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- this is my custom breadcrumb -->
        <p class="navbar-text navbar-right">
            <!-- a glyphicon as homepage -->
            <a class="navbar-link" href="#" title="homepage"><span class="glyphicon glyphicon-home icons-padding"></span></a>
            &nbsp;>&nbsp;&nbsp;
            <a class="navbar-link" href="#">Link1</a>                  
            &nbsp;>&nbsp;&nbsp;
            <a class="navbar-link" href="#">Link2</a>                  
            &nbsp;>&nbsp;&nbsp;
            <a class="navbar-link" href="#">Link3</a>                  
            &nbsp;>&nbsp;&nbsp;
            Link4
        </p>
        <!-- end -->
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">
                    <span class="glyphicon glyphicon-off icons-padding">
                    </span>
                    Exit
                </a>
            </li>
        </ul>
    </div>
</nav>

Vous avez besoin de modifier le code css juste pour modifier le lien de l'appel:

a.navbar-link {
    text-decoration: underline;
}

Il fonctionne avec btn trop: il suffit d'ajouter, à la classe link "btn btn-default btn-xs".

OriginalL'auteur s.benve

Vous devez vous connecter pour publier un commentaire.