Comment mettre de la barre de navigation de la marque à droite dans twitter bootstrap?

J'ai besoin d'une complète aligné à droite, barre de navigation dans le bootstrap, mais le problème, c'est ma marque est dans le côté gauche mais j'en ai besoin pour aller à droite. Bien que je peux mettre d'autres éléments de la liste à l'aide de navbar-right option pour le côté droit.

  <nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 pull-right" href="#">CesaStack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">بیاب</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>

Il est à l'aide de bootstrap, version 4 Dans le bootstrap, version 4, la classe est de tirer droit.

InformationsquelleAutor Hamid FzM | 2013-12-13

34

Déplacer la marque au-dessus de la barre de navigation en-tête et de lui donner la classe navbar-droit.

Cela met votre marque sur la droite lorsque dans les vues du bureau, et il va de gauche dans les vues mobiles, correctement en gardant le bouton de menu comme la plus à droite de l'élément.

http://jsfiddle.net/KHtU4/
```
<nav class="navbar navbar-default" role="navigation">
<a class="navbar-brand navbar-right" href="#">CesaStack</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>          
</div>
<div class="collapse navbar-collapse">

</div>
</nav>
```
- Supposons que je veux de la marque sur le côté droit, dans les deux ordinateurs de bureau et mobiles de vue... d'Ailleurs navbar-d'en-tête que je veux sur le côté gauche dans les deux vues. s'il vous plaît suggérer sna
- le lien semble rompu
- ce lien devrait être corrigé maintenant
InformationsquelleAutor friggle
8

La marque sur le côté gauche, même si il a la classe .pull-right, car elle est contenue dans
```
<div class="navbar-header">
..
<a class="navbar-brand pull-right" href="#">CesaStack</a>
</div>
```
si vous le placez à l'extérieur, juste après .navbar-header-></div>, alors il sera aligné à droite, comme il se doit.

Voir votre code dans ce violon -> http://jsfiddle.net/9BfjX/
- Ce n'est pas regarder droit dans les vues mobiles. Dans l'ancienne bootstrap, vous pourriez mettre la marque sur la droite, de sorte que dans le bureau, il serait aller [éléments de menu][marque], et dans le mobile, il serait [marque][bouton menu]. Cette méthode permet à la marque d'aller à une nouvelle ligne en dessous de la touche menu.
- tu veux dire mobile avec bootstrap 3.x?
- Désolé, je ne sais pas ce que j'essayais de dire quand j'ai tapé mon commentaire ci-dessus. En utilisant la méthode que vous avez donné, quand la barre de navigation s'effondre, la marque sera sur une autre ligne en dessous de la barre de navigation-bascule. Il suffit de regarder dans votre violon. Regarder le violon dans ma réponse pour voir la différence.
InformationsquelleAutor davidkonrad

Ce que vous devez utiliser est navbar-right tirez pas droit

 <div class="navbar navbar-inverse navbar-static-top" 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>
**LOGO OR HEADER NAME HERE**
</div>
<div class="navbar-collapse navbar-right collapse">
**OTHER MENU OR FORM HERE**
</div><!--/.navbar-collapse -->
</div>

InformationsquelleAutor dsmithco

-2

<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>    
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
</ul>
</div>
</nav>

Vous devez ajouter au moins un commentaire expliquant votre solution.
ajouter de la barre de navigation à droite de la classe dans la balise ul déplacer le menu de droite ajouter de la barre de navigation de gauche de la classe dans la balise ul déplacer le menu de gauche

InformationsquelleAutor Nikit Barochiya

Vous devez vous connecter pour publier un commentaire.