Css 如何修复Bootstrap 3 RC1 navbar HAML代码以在狭窄/移动视图中工作？

我一直在使用以下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

在狭窄的浏览器窗口或手机上查看时，导航栏元素可以很好地堆叠起来，如屏幕截图所示：

我刚刚尝试将我的项目升级到Bootstrap3。我现在正在为导航栏使用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代码以恢复旧的行为？

当bootstrap 3.0在RC1中时，可用的默认版本包含用于响应导航栏的css（对于将来的版本也可能如此）

第2922行：包含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>

.navbar品牌{
浮动：左；
右边距：5px；
左边距：-15px；
}
.导航栏导航{
浮动：左；
边际上限：0；
页边距底部：0；
}
.navbar nav>li{
浮动：左；
}
.导航栏导航>李>a{
边界半径：0；
}
.导航杆-导航杆-向右拉{
浮动：对；
宽度：自动；
}
.导航栏切换{
位置：相对位置；
顶部：自动；
左：自动；
显示：无；
}
.导航崩溃{
显示：块！重要；
高度：自动！重要；
溢出：可见！重要；
}

您是否按照所述将其包含在您的中？从2.3迁移后，我也遇到了同样的问题，没有这个标签

---

%meta{name:'viewport'，content:'width=device width，initial scale=1.0'}

您确定问题出在HAML上，而不是新版本的引导？另外，您是否使用了正确的语法？您的代码的一个版本使用了

.navbar-inner

上面的

.container

，另一个版本使用了

.navbar-nav

里面的

.container

。您是对的，我的问题不太准确。当然，这个问题与HAML没有直接关系，只是我正在使用HAML生成HTML。我尝试了各种容器组合等，这就是为什么我的语法发生了变化。。。