1

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

.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 代码以恢复旧行为？

4

2 回答 2

3

虽然 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>
于 2013-08-01T09:26:05.850 回答
0

您是否按照http://getbootstrap.com/getting-started/的描述将其包含在您的文件中？从 2.3 迁移后，我遇到了同样的问题，没有这个标签

%meta{name: 'viewport', 内容: 'width=device-width, initial-scale=1.0'}

于 2013-10-11T17:04:43.133 回答