Centrer le contenu dans la barre de navigation d'amorçage réactif
Je ne parviens pas à centrer mon contenu dans la barre de navigation bootstrap. J'utilise bootstrap 3. J'ai lu de nombreux articles, mais le CSS ou les méthodes utilisées ne fonctionneront pas avec mon code! Je suis vraiment frustré, c'est donc ma dernière option. Toute aide serait appréciée!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<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=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Je pense que c'est ce que vous recherchez. Vous devez supprimer le float: left de la navigation intérieure pour le centrer et en faire un bloc en ligne.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
Edit: si vous souhaitez que cet effet ne se produise que si la navigation n'est pas repliée, entourez-la dans la requête multimédia appropriée.
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Le message original demandait comment centrer la barre de navigation effondrée. Pour centrer des éléments sur la barre de navigation normale, essayez ceci:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
Il existe un autre moyen de faire cela pour les mises en page qui n'ont pas besoin de placer la barre de navigation à l'intérieur du conteneur et qui ne nécessitent aucune substitution CSS ou Bootstrap.
Placez simplement une div avec la classe Bootstrap container autour de la barre de navigation. Cela va centrer les liens dans la barre de navigation:
<nav class="navbar navbar-default">
<!-- here's where you put the container tag -->
<div class="container">
<div class="navbar-header">
<!-- header and collapsed icon here -->
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- links here -->
</ul>
</div>
</div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->
Si vous souhaitez ensuite aligner le contenu du corps sur la barre de navigation centrale, vous devez également le placer dans la balise Bootstrap container.
<div class="container">
<! -- body content here -->
</div>
Tout le monde ne peut pas utiliser ce type de présentation (certaines personnes doivent imbriquer la barre de navigation elle-même dans la container). Néanmoins, si vous pouvez le faire, c’est un moyen facile d’obtenir vos liens de barre de navigation et votre corps centrés.
Vous pouvez voir les résultats dans cette page entière JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/
Source: http://jsfiddle.net/bdd9U/229/
Ce code a fonctionné pour moi
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
Mise à jour 2018
Bootstrap 4
Centrer le contenu de la barre de navigation est plus facile avec Bootstrap 4 et vous pouvez voir de nombreux scénarios de centrage décrits ici: https://stackoverflow.com/a/20362024/171456
Bootstrap 3
Un autre scénario qui ne semble pas avoir encore été résolu est le centrage des liens marque et marque et navbar. Voici une solution ..
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
Voir aussi: Bootstrap NavBar avec éléments alignés à gauche, au centre ou à droite
depuis le site officiel de bootstrap (et presque, comme l’a dit Eric S. Bullington.
https://getbootstrap.com/components/#navbar-default
l'exemple de barre de navigation ressemble à ceci:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
...etc
pour centrer le nav, que ce que j'ai fait:
<div class="container-fluid" id="nav_center">
css:
@media (min-width:768px) { /* don't break navbar on small screen */
#nav_center {
width: 700px /* need to found your width according to your entry*/
}
}
travaillez avec class = "container" et navbar-right ou left, et vous pouvez bien sûr remplacer id par classe. :RÉ
On dirait que toutes ces réponses impliquent des CSS personnalisés en plus du bootstrap. La réponse que je fournis utilise uniquement du bootstrap, donc j'espère que cela viendra à utiliser pour ceux qui veulent limiter les personnalisations.
Cela a été testé avec Bootstrap V3.3.7
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-5 col-xs-2 text-center">
<p>I am centered text<p>
</div>
<div class="col-xs-5"></div>
</div>
</div>
</footer>
La V4 de BootStrap ajoute les éléments Centre (justification-contenu-centre) et Alignement correct (justification-contenu-fin) selon: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
cela devrait marcher
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Pour Bootstrap 4:
Juste utiliser
<ul class="navbar-nav mx-auto">
mx-auto fera le travail
Utilisez le code HTML suivant
<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><h5><a href="#/">Home</a></h5></li>
<li>|</li>
<li><h5><a href="#products">About</a></h5></li>
<li>|</li>
<li><h5><a href="#">Contacts</a></h5></li>
<li>|</li>
<li><h5><a href="#cart">Cart</a></h5></li>
</ul>
</div><!-- /.container-fluid -->
</nav>
Et css
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-default {
background-color: white;
border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
background-color:white;
}
Modifier selon vos besoins