2015-08-26 62 views
0

這應該很簡單,但我錯過了一些東西。Bootstrap Nav標誌問題

我在一個新的導航欄添加到引導網站,它看上去是這樣

http://codepen.io/davidcochran/pen/Dihnl

但是當我真正落實到我的引導網站這拒不中心。

<header role="banner" id="logo-main1"><div id="everything"> 
    <img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"> 
    <nav id="navbar-primary" class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- 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-primary-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <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> 
</header><!-- header role="banner" --></div> 

CSS

.header[role="banner"] { 
    #logo-main { 
    display: block; 
    margin: 20px auto; 
    } 
} 

#navbar-primary.navbar-default { 
    background: transparent; 
    border: none; 
    .navbar-nav { 
    width: 100%; 
    text-align: center; 
    > li { 
     display: inline-block; 
     float: none; 
     > a { 
     padding-left: 30px; 
     padding-right: 30px; 
     } 
    } 
    } 
} 
.logo-main1 { 
    text-align: center 
} 

它看起來像這樣:

!鏈接刪除,直到進一步檢查

+0

請分享您的bootstrap網站codepen。 – Lal

回答

0

另一個css減速可能會覆蓋導航欄中心的選擇器和減速(下圖)。

#navbar-primary.navbar-default .navbar-nav { 
width: 100%; 
text-align: center; 
+0

你是對的,我沒有騎任何東西。我找到了你提到的部分並刪除/修改了它。謝謝!! –