Centre Navbar dans Bootstrap [dupliquer]
cette question a déjà une réponse ici:
comment centrer le menu avec bootstrap?
HTML:
<nav class='navbar navbar-default'>
<div class='container-fluid container'>
<div class='navbar-header'>
<a class='navbar-brand' href='#'>Title</a>
</div>
<div id='navbar' class='navbar-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>
</ul>
</div>
</div>
</nav>
c'est basique et pourtant j'ai essayé plusieurs solutions et il ne sera pas le centre du menu, il apparaît toujours aligner à gauche. Je peux centrer les éléments de la liste, mais pas la liste elle-même.
4 réponses
@media (min-width:768px) {
/* centered navigation */
.nav.navbar-nav {
float: left;
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
}
.nav.navbar-nav li {
text-align: left
}
}
essayez ceci:
.navbar-default > .container-fluid {
display: flex;
justify-content: center;
}
nécessite des préfixes de vendeur pour IE10. Non supporté en dessous de IE10.
utilisez la rangée de classe bootstrap et utilisez la seconde .class col-md-6 . col-md-offset-3
ce qui pourrait vous aider
vérifier la sortie dans jsbin
@charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
}
.navbar.navbar-default{
background-image:none;
background-color:rgba(89,63,127,0.79);
border:none;
}
.navbarheader{
color:#FFFFFF;
margin-top:-10px;
font-family: 'Lobster', cursive;
}
.nav,.navbar-nav{
font-size:15px;
color:white;
}<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="MylandingSS.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity= "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<!----------------HEADER------------------------------>
<div class="navbar-header navbar-brand header"><h1 class="navbarheader">abcdefg</h1></div>
<!------------------LINKS----------------------------------->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="nav navbar-nav">
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>pour centrer le contenu de l'ensemble navbar, (centrage à la fois le marque et liens )..
.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
si vous voulez centrer seulement les liens, voir cette question: le contenu du Centre en responsive bootstrap navbar