html - 为什么我的 Twitter Bootstrap 导航栏样式不适用？

Question

一些背景 - 我正在制作一个 Rails 应用程序 (4.0)。使用 BS3，bootstrap.css 和 bootstrap-theme.css 都在我元素的样式表目录中，bootstrap.js 在我的 javascripts 目录中。其他 Bootstrap 样式显示效果很好，例如 .btn-group、.btn-primary 等。这是我尝试创建的导航栏 (HAML):

.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/

如何使它像网站上显示的那样水平放置？我只是在使用过时的类名吗？我已经查看了与此相关的关于 SO 的各种其他问题，但似乎没有答案。任何帮助将不胜感激!

Answer 1

您正在使用具有新样式的旧 (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 .