爲什麼我的Twitter Bootstrap導航欄樣式不適用？

一些背景 - 我正在製作一個rails應用程序（4.0）。使用BS3，bootstrap.css和bootstrap-theme.css都在我的項目的樣式表目錄中，以及我的javascripts目錄中的bootstrap.js。其他引導款式工夫顯示就好了，比如.btn組，.btn小學等，這是我想創建一個導航欄（HAML）：爲什麼我的Twitter Bootstrap導航欄樣式不適用？

.navbar.navbar-fixed-top 
    .navbar-inner 
     .container 
      %a.brand{:href => '#'} Site Name 
      %ul.nav 
       %li.active 
        %a{:href => '#'} Home 
       %li 
        %a{:href => '#'} Link 1 
       %li 
        %a{:href => '#'} Link 2

這裏是它的外觀，垂直堆疊而不是水平，以及'品牌'缺少其風格：http://jsfiddle.net/JLt9u/

如何使其水平，如在網站上看到的？我只是使用過時的類名？我已經研究過與此相關的所有其他問題，而且似乎沒有答案。任何幫助，將不勝感激！

來源

2013-09-21 Radian_Mode

你確實意識到導航欄是響應式的，並自動在較小的設備上「垂直」摺疊？ http://jsfiddle.net/dxXmY/1/ – Adrift

不，我沒有意識到響應是一種默認行爲。 –

您正在使用具有新樣式的舊（2.x）標記。適當的標記，從Bootstrap docs採取：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    </ul> 
</nav>

如果從2.x遷移到3.0有a docs section for that。

來源

2013-09-21 16:39:50 Pavlo

不完全，它仍然是垂直的，沒有網站品牌：http://jsfiddle.net/dxXmY/。但是，您在哪裏獲得了更新的標記信息，以便將來可以參考它？ –

請注意，新的Bootstrap在默認情況下具有響應性，如果視口足夠小，您將看到移動版本：http://jsfiddle.net/dxXmY/embedded/result/（您的小提琴，全屏） – Pavlo

您是絕對正確的 - 我一直在適合半屏的窗口進行測試。謝啦。 –

爲什麼我的Twitter Bootstrap導航欄樣式不適用？

回答

相關問題