我很難讓Bootstrap移動崩潰工作

Question

我是新手引導和使用導航欄。我想在左邊，中間的標誌。我試過下面的代碼，但它不起作用，有什麼建議嗎？

<nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button>  
     </div> 
     <a class="navbar-brand" href="#">Brand</a> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li><a href="#">Left</a></li> 
       <li><a href="#about">Left</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#about">Right</a></li> 
      <li><a href="#contact">Right</a></li> 
      </ul> 
     </div> 
    </nav> 

Answer 1

我重新創建了一個導航欄供您使用品牌標誌在中心。

<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-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 
    <a class="navbar-brand" href="#">Brand</a> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 

     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#">Menu</a></li> 
     <li><a href="#">Menu</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

CSS：

.navbar-brand 
{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 

CODEPEN DEMO