Bootstrap居中整個導航欄

因此，我在Google上搜索並試圖在過去一小時內解決此問題，並且我開始稍微感到不適。Bootstrap居中整個導航欄

我需要這個導航欄（目前擁有它的全部內容向左）：（油漆製造，笑）navbar left

擁有的所有內容集中到這個樣子：navbar center edit

我發現的唯一解決方案是讓導航鏈接以品牌或品牌爲中心，沒有導航鏈接。

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-header "> 
     <a class="navbar-brand" href="#">SOUND HAUS</a> 
     <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="/articles" style="color:#fff;">ARTICLES</a></li> 
      <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li> 
      <li><a href="/gallery" style="color:#fff;">GALLERY</a></li> 
      <li><a href="/contact" style="color:#c00618;">CONTACT</a></li> 
     </ul> 
    </div> 
</nav>

CSS：

.navbar { 
    font-family: Long Shot; 
    background-color: black; 
    z-index: 998; 
} 

.navbar-brand { 
    font-size: 50px; 
    margin-top: 20px; 
    color: white !important; 
} 

.navbar-nav { 
    margin-top: 20px; 
    font-size: 20px; 
}

提前感謝！

來源

2016-10-22 Daniel Glynn Goodwin

你可以包含該HTML引導程序的CSS src文件 – repzero

@repzero我不知道我明白你在問什麼。抱歉。 –

您的示例代碼並不完全反映您的屏幕截圖中的內容..將這個問題中的所有代碼粘貼到jsfiddle中...查看屏幕截圖和代碼之間的區別？....我認爲您的html頁面包含鏈接標籤到外部CSS文件引導 – repzero

你應該在容器中放置一個容器，然後覆蓋並添加一些CSS規則到引導規則。

<style> 
.container.nav{ 
    text-align:center 
} 
.navbar { 
    font-family: Long Shot; 
    background-color: black; 
    z-index: 998; 
} 

@media (min-width: 768px){ 
.navbar-header{ 
    max-width: 400px; 
    display: inline-block; 
} 

.navbar-header { 
    float: none; 
    } 

} 

@media (min-width: 768px){ 
.navbar-collapse.collapse{ 
    max-width: 600px; 
    display: inline-block; 
} 

.navbar-collapse.collapse { 
    display: inline-block !important; 
    } 
} 


.navbar-brand { 
    font-size: 50px; 
    margin-top: 20px; 
    color: white !important; 
} 

</style> 


<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container nav"> 
     <div class="navbar-header "> 
      <a class="navbar-brand" href="#">SOUND HAUS</a> 
      <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="/articles" style="color:#fff;">ARTICLES</a></li> 
       <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li> 
       <li><a href="/gallery" style="color:#fff;">GALLERY</a></li> 
       <li><a href="/contact" style="color:#c00618;">CONTACT</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav>

我只加了div class="container nav" 然後一些CSS規則必須修改爲尺寸大於768px（如果大致相同的保持）更大。這是我做的一個截圖：

來源

2016-10-22 02:09:40 Nensi601

我可以吻你。非常感謝！ –

不客氣：D – Nensi601

Bootstrap居中整個導航欄

回答

相關問題