Aligner Bootstrap 3 barre de navigation à droite et à inclure la zone de recherche a également aligné à droite
Je suis en utilisant bootstrap 3 pour construire un site et je rencontre le problème suivant:
Le design du site que je suis en train de a un aligné à droite de la navigation, qui devrait inclure une barre de recherche à la suite de la finale de lien. Voici un visuel:http://imgur.com/eevc0iS
Je ne peux que semblent faire ce travail si je continue à la navigation aligné à gauche après le logo. Je ne peux pas obtenir la navigation ET la barre de recherche pour être dans une belle aligné à droite de la ligne.
Je voudrais avoir l'air beaucoup les mêmes que j'ai maintenant, mais avec cette barre de recherche sur l'autre côté.
Voici le code:
<div class="navbar navbar-default 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" rel="home" href="#">BRAND</a>
</div><!-- /.navbar-header-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">link</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">about</a></li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div><!--/.nav-collapse -->
</div><!-- /. container-->
</div> <!-- /. navbar-->
Vous devez vous connecter pour publier un commentaire.
Vous n'avez pas besoin de les envelopper avec un div en float droit.
Simplement utiliser la classe des noms déjà disponibles, l'indice est dans le balisage
.navbar-left
et.navbar-right
. L'utilisation de ces flotter un élément à gauche ou à droite dans la barre de navigation et éviter "divitis'.Vous devez échanger des liens et de la recherche autour comme nous sommes flottant.
JsFiddle
Il est également
.pull-left
et.pull-right
que vous pouvez utiliser ailleurs sur la page, pour de semblables flottant exigences.J'ai fermé la balise ul après le formulaire de recherche div. Fonctionne parfaitement.
J'utilise le plus récent exemple de Bootstrap site officiel pour faire le test et je pense que cela peut être fait par quelques-uns de la règle css. Envelopper les éléments que vous voulez être aligné à droite, et de définir l'enveloppe de la position et de droit. Voir l'échantillon.
JSFIDDLE