Bootstrap navbar aligner souhaitez aligner à droite
Je suis en train d'aligner la barre de navigation à droite. Lorsque j'utilise l' .pull droit en classe c'est en poussant la barre de navigation trop à droite: "off the grid".
Ce que je fais mal?
Code:
<div class="row">
<div class="span3 top_logo"><img src="images/logo_svart.png" width="177" height="60" alt="BETA Team Performance" /></div>
<div class="span9">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><strong>MENY <i class="icon-chevron-down icon-white"></i></strong>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Start</a></li>
...
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
InformationsquelleAutor Sickan007 | 2013-02-27
Vous devez vous connecter pour publier un commentaire.
Le problème se pose parce que dans le bootstrap-responsive.css le
margin-right
est mis à 0.Jsfiddle avec une base de maquette Voir dans le navigateur
Donc, vous devez fournir un certain nombre d'semblent appropriées, comme ci-dessous:
Le code html pour créer l'effet désiré peut être écrit de la manière suivante :
Pour toute personne arrivant ici qui utilise Bootstrap v3, il suffit d'utiliser la inclus
.navbar-right
sur un élément de liste:essayez de mettre votre
pull-right
classe sur lediv.collapse
. Que peut faire l'affaire.Si vous ne voulons tirer quelque chose de tout à fait à droite à l'extérieur de la grille (comme sélectionner la langue ou sociale, les boutons), vous pouvez créer une classe simple et ajouter à la
<ul class="nav navbar-nav language">
et le style comme.language {right:50px;position:absolute;}
. Fonctionne très bien avec l'aide de la.navbar-brand
comme un logo à votre gauche (à partir d'un des Directeurs artistiques de l'œil, de toute façon).Ici a fonctionné pour moi. Mettre
pull-right
dans lediv.collapse
ne fonctionne pas - il doit être dans le non-ordonnée de la liste de classe.Dans Bootstrap 4 vous pouvez utiliser
ml-auto
pour aligner le menu à droite: