Question

我希望在调整屏幕大小时有一个折叠的导航栏，所以我想使用Bootstrap。

在application.html.erb中：

<body>
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Some Store</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><%= link_to "Browse Products" %></li>
          <li><%= link_to "Price List" %></li>
          <li><%= link_to "Contact Us" %></li>
          <li><%= link_to "Cart" %></li>
        </ul>
      </div>
    </div>
  </div>
</div>

在Gemfile中我有gem 'bootstrap-sass'

在application.css.scss我写的@import 'bootstrap;'

在application.js我有//= require bootstrap

我不明白为什么它不起作用，我只是从bootstrap网站复制

Answer 1

您的导入是正确的，但您当前的标记不是。它与我在某些示例中看到的标记和类不匹配。我首先尝试使用引导程序文档中的sticky footer with fixed navbar example作为指导，使用标记进行构建，以使标记正确显示。以下是我调整标记的方法：

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Some Store</a>
    </div> <!-- end div class="navbar-header" -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><%= link_to "Browse Products" %></li>
        <li><%= link_to "Price List" %></li>
        <li><%= link_to "Contact Us" %></li>
        <li><%= link_to "Cart" %></li>
      </ul>
    </div> <!-- end div class="collapse navbar-collapse" -->
  </div> <!-- end div class="container" -->
</div> <!-- end div class="navbar navbar-default navbar-fixed-top" -->

如果仔细观察，我会将div的位置与类container和navbar-inner交换，并将类更改为围绕折叠按钮的<div class="navbar-header">。然后我不得不更改菜单项周围的div以使用类navbar-collapse而不是您拥有的nav-collapse，否则菜单项会消失。为了使按钮起作用，我将其从<a>标记更改为<button>标记以及data-target="navbar-collapse"属性，以正确定位可折叠菜单项。完成这些更改后，我有一个功能正常的下拉菜单，用于显示窗口大小＆lt; 768px。

并且不要忘记在<body>的{{1}}标记中添加样式，以确保您的网站内容显示在固定导航栏下方。

希望有所帮助！

克里斯

Answer 2

请检查标题部分中的application.html.erb文件添加此

background-size: cover;

Navbar与引导程序折叠不起作用

2 个答案: