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

Question

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

zer*_*uno 4 ruby-on-rails twitter-bootstrap

我希望在调整屏幕大小时有一个折叠的导航栏,所以我想使用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>

Run Code Online (Sandbox Code Playgroud)

在Gemfile中我有 gem 'bootstrap-sass'

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

在application.js我有//= require bootstrap

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

Answer 1

sch*_*man 6

您的导入是正确的,但您当前的标记不是.它与我在某些示例中看到的标记和类不匹配.我首先尝试使用标签来构建,同时在引导程序文档中使用带有固定导航栏示例的粘性页脚作为指导,以使标记正确显示.以下是我调整标记的方法:

<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" -->

Run Code Online (Sandbox Code Playgroud)

如果你仔细观察,我换的div的位置带班container和navbar-inner,改变了类<div class="navbar-header">包围折叠按钮.然后我不得不改变菜单项周围的div navbar-collapse而不是nav-collapse你所拥有的类,否则菜单项就会消失.为了使按钮起作用,我将其从<a>标签更改为<button>标签以及data-target="navbar-collapse"属性以正确定位可折叠菜单项.完成这些更改后,我有一个功能正常的下拉菜单,窗口大小<768px.

并且不要忘记在<body>标记中添加样式,padding-top:51px;以确保您的网站内容显示在固定导航栏下方.

希望有所帮助!

克里斯

归档时间：	11 年，9 月前
查看次数：	6946 次
最近记录：	8 年，4 月前