I need to center some content in bootstrap navbar
trying and copy from other post but isn't working...
Bootstrap: center some navbar items
my code:
CSS:
.navbar-nav ul > .center-nav {
display: inline-block !important;
left: 0 !important;
right: 0 !important;
text-align:center !important;
width:70% !important;
}
.navbar-nav > .center-nav ul, .navbar-nav > .center-nav li a {
display: inline !important;
float: none !important;
line-height: 40px !important;
}
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Left <span class="sr-only">(current)</span></a></li>
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav center-nav">
<li><a href="#">center</a></li>
<li><a href="#">center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Place your center navigation after the right in your markup. Remove floats, display the center nav items as inline-block
and align them centrally.
Note that since this changes the order of your markup, a mobile device will list the right navigation items before the centre ones.
HTML
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Left <span class="sr-only">(current)</span></a></li>
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
</ul>
<ul class="nav navbar-nav center-nav">
<li><a href="#">center</a></li>
<li><a href="#">center</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
@media screen and (min-width: 768px){
.center-nav{
float: none;
text-align: center;
}
.center-nav > li{
float: none;
display: inline-block;
}
}
If I understand your question correctly you are wanting to center the li's
with the class name center-nav
.
Add the following to your css
if that's what you are looking for:
.center-nav {
text-align: center;
}
You're using this Bootstrap class:
<ul class="nav navbar-nav navbar-right">
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
</ul>
navbar-right
Which clearly floats that part of the navbar to the right.
You should try to look into the classes you are using, especially if taken from a framework, and ESPECIALLY if taken directly from a template.
The !important
will have no effect if your custom CSS comes before the Bootstrap CSS, which is probably what's happening.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.