如何使用引導將徽標居中並將鏈接左右放置在導航欄上？

Question

我正在用bootstrap創建一個導航欄。我希望徽標位於徽標的中心和4個鏈接左側和右側。這是我得到的，但是當導航欄嘗試摺疊時，它會中斷。請幫我解決崩潰問題。

HTML：

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div id="container"> 
      <div id="navbar-header pull left"> 
       <a id="brand" class="navbar-brand">JG</a> 
      </div> 
      <div class="navbar-header pull-right"> 
       <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul id="listleft" class="nav navbar-nav navbar-left"> 
        <li><a href="#home">Home</a></li> 
        <li><a href="#about">About</a></li> 
       </ul> 
       <ul id="listright" class="nav navbar-nav navbar-left"> 
        <li><a href="#contact">Contact</a></li> 
        <li><a href="#blog">Blog</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS：

.navbar-brand{ 
    position: absolute; 
    width:100%; 
    left:0; 
    top:0; 
    text-align: center; 
    margin: auto; 
    float:none; 
} 
#listright{ 
    float:right !important; 
} 
#listleft{ 
    float:left !important; 
} 

Answer 1

這適用於引導3.2

HTML

<nav class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
     <!-- 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-brand-centered"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <div class="navbar-brand navbar-brand-centered">Brand</div> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-brand-centered"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li>    
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

CSS

@media screen and (min-width:768px){ 
    .navbar-brand-centered { 
     position: absolute; 
     left: 50%; 
     display: block; 
     width: 160px; 
     text-align: center; 
     background-color: #eee; 
    } 
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered { 
     margin-left: -80px; 
    } 
} 

聲明：這不是我的解決方案，找到了here，但萬一它消失了。 :)