Navbar折叠与引导不起作用

我想在调整屏幕大小时导致崩溃的导航栏，所以我想使用Bootstrap。Navbar折叠与引导不起作用

在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

我不明白为什么它不起作用，我只是从引导站点复制

来源

2013-11-26 zer0uno

您的导入是正确的，但是您的当前标记不是。它与我在一些例子中看到的标记和类不匹配。我首先尝试使用引导文档中的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"属性以正确定位可折叠菜单项目。一旦做出这些更改，我就可以使用窗口大小为< 768px的功能下拉菜单。

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

希望有帮助！

克里斯

来源

2013-11-30 03:20:27 schenkman

请检查您的application.html.erb文件中的标头中添加该

<meta charset="UTF-8"> <meta name=viewport content="width=device-width, initial-scale=1">

来源

2017-05-04 04:14:18

Navbar折叠与引导不起作用

回答

相关问题