ruby-on-rails – Navbar与bootstrap折叠不起作用

发布时间：2020-12-17 03:40:48 所属栏目：百科来源：网络整理

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

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

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

解决方法

您的导入是正确的,但您当前的标记不是.它与我在某些示例中看到的标记和类不匹配.我首先尝试使用标记来构建,同时在引导程序文档中使用 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容器和navbar-inner交换了div的位置,并将类更改为< div class =“navbar-header”>围绕折叠按钮.然后我不得不改变菜单项周围的div以使用类导航栏折叠而不是你拥有的导航折叠,否则菜单项就会消失.为了使按钮起作用,我从< a>中更改了它.标记为< button>标记以及data-target =“navbar-collapse”属性以正确定位可折叠菜单项.完成这些更改后,我有一个功能正常的下拉菜单,用于显示窗口大小< 768px. 并且不要忘记为你的< body>添加一种风格padding-top标签??：51px;保证您的网站内容显示在固定导航栏下方.

希望有所帮助！

克里斯

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!