web-dev-qa-db-fra.com

Bootstrap - bouton de barre de navigation flottant à droite

J'utilise la barre de navigation bootstrap), mais je souhaite placer l'un des boutons à droite plutôt qu'à gauche, comme précédemment. Voici le code HTML:

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <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>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact" class="navbar-nav pull-right">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

J'ai essayé d'utiliser nav navbar-nav navbar-right, float:right, et pull-right. Je ne sais vraiment pas ce que je pourrais faire d'autre. Toute aide est appréciée.

JSFiddle

36
Michael Blake

Créer un ul.nav pour seulement cet élément de la liste et flotte ce ul à droite.

jsFiddle

21
helion3

Vous devrez utiliser le balisage suivant. Si vous souhaitez placer des éléments de menu à droite, créez une classe distincte <ul class="nav navbar-nav"> Avec la classe navbar-right.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <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>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>

        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>
46
Ravimallya

Dans bootstrap 4, utilisez:

<ul class="nav navbar-nav ml-auto">

Cela poussera la barre de navigation vers la droite. Utilisez mr-auto pour le pousser à gauche, il s’agit du comportement par défaut.

18
Henry