如何修复我的Bootstrap 3 RC1导航栏HAML代码以在窄/移动视图中工作？

Question

我一直在使用以下HAML代码生成Bootstrap 2.x.y导航栏：

.navbar.navbar-fixed-top.navbar-inverse
    .navbar-inner
        .container
            %a.brand{:href => '/'} xyz.com
            %ul.nav
                %li
                    %a{:href => '/'}Home
                %li
                    %a{:href => '/blog'}Articles
                %li
                    %a{:href => '/research'}Research
                %li
                    %a{:href => '/contact'}Contact
                %li
                    %a{:href => '/gallery',}Gallery

在狭窄的浏览器窗口或移动电话中查看时，导航栏元素很好地堆叠，如屏幕截图所示：

我刚试过将我的项目升级到Bootstrap 3.我现在正在使用这个HAML代码用于导航栏：

.navbar.navbar-fixed-top.navbar-inverse
    .container
        %a.navbar-brand{:href => '/'} xyz.com
        %ul.nav.navbar-nav
            %li
                %a{:href => '/'}Home
            %li
                %a{:href => '/blog'}Articles
            %li
                %a{:href => '/research'}Research
            %li
                %a{:href => '/contact'}Contact
            %li
                %a{:href => '/gallery',}Gallery 

但是，导航栏现在不能像以前一样工作（参见第二个屏幕截图）：

如何使用bootstrap 3 RC1修复HAML代码以恢复旧行为？

Answer 1

虽然Bootstrap 3.0在RC1中，但可用的默认版本包含响应式导航栏的css（对于未来的版本也可能如此）

第2922行：http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css包含最小宽度为768px的媒体查询。

您可以手动添加使导航栏显示项内嵌显示在代码中的css：

<style>
.navbar-brand {
  float: left;
  margin-right: 5px;
  margin-left: -15px;
}
.navbar-nav {
  float: left;
  margin-top: 0;
  margin-bottom: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  border-radius: 0;
}
.navbar-nav.pull-right {
  float: right;
  width: auto;
}
.navbar-toggle {
  position: relative;
  top: auto;
  left: auto;
  display: none;
}
.nav-collapse.collapse {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
</style>

Answer 2

您是否按照http://getbootstrap.com/getting-started/的描述将其包含在您的手中？从2.3

迁移后，我对此标记没有同样的问题

％meta {name：'viewport'，content：'width = device-width，initial-scale = 1.0'}