导航栏固定顶部取消.container居中

Question

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?

Answer 1

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 :)

Answer 2

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