为什么我的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导航栏样式不适用？

回答

相关问题