Why does twitter bootstrap's navbar-fixed-top
or navbar-fixed-bottom
makes a navbar full width and cancels the effect of .container
which centers a navbar? See code below
<div class="container">
<nav class="navbar navbar-fixed-top navbar-full navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Can someone explain this?
Did you try add your container class to nav element?
<nav class="navbar navbar-fixed-top navbar-full navbar-dark bg-inverse container">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
I guess it should help a little and if you add your own class like text-center with css: text-align:center; that should help you :)
I did manage to make it work by adding the class container
inside the <div class="navbar navbar-inverse navbar-fixed-top">
This is how my code looks like.
<div class="container">
<div class="container navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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 navbar-nav">
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
</div>
</div>
You can see it working here: Codepen
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.