bootstrap 3-Comment placer la marque au centre du navbar?
J'utilise Bootstrap 3. Je voudrais une barre de navigation avec la marque. Pas d'autres liens ou quoi que ce soit d'autre. Et je veux que la marque soit au centre. Comment puis-je accomplir? Le code css suivant ne fonctionne pas:
.navbar-brand {
text-align: center;
}
5 réponses
css:
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-brand {float:none;}
html:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
une Autre option est d'utiliser nav-justified..
<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 nav-justified">
<li><a href="#" class="navbar-brand">Brand</a></li>
</ul>
</div>
</nav>
CSS
.navbar-brand {
float:none;
}
Bootply
si vous n'avez pas d'autres liens, alors il n'y a pas d'utilisation pour l'en-tête navbar....
HTML:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand text-center center-block" href="#">Navbar Brand</a>
.....
</nav>
CSS:
.navbar-brand {
float: none;
}
Toutefois, si vous ne souhaitez que d'autres liens ici est une approche très efficace qui permet de:https://stackoverflow.com/a/34149840/3123861
pour corriger le chevauchement, vous n'avez besoin de modifier que le .navbar-basculer dans vos propres styles css
quelque chose comme cela, ça fonctionne pour moi:
.navbar-toggle{
z-index: 10;
}
j'ai utilisé deux classes d'atteindre cet objectif et de maintenir la réactivité navbar-brand-left et navbar-brand-center. Gardez à l'esprit qu'il utilise SASS / Less Bootstrap pour la hauteur de la ligne, sinon spécifiez une hauteur hardcode px / rem.
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand-left visible-xs visible-sm">Brand</a>
</div>
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
</ul>
<a href="#" class="navbar-brand-center hidden-xs hidden-sm">Brand</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log in</a></li>
<li><a href="#">Start now</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
.navbar-brand-left {
display: inline-block;
margin: 0;
padding: 0;
line-height: @navbar-height;
}
.navbar-brand-center {
display: inline-block;
margin: 0 auto;
padding: 0;
line-height: @navbar-height;
}