折叠的Navbar无法在Rails应用程序中随Bootstrap一起扩展

编程问答 2022-06-03

问题描述

我已经阅读了所有可以找到的解决方案，但仍然遇到困难。我的导航栏可以正常折叠到汉堡按钮中，但是单击时不会扩展。我从Bootstrap和StackOverflow中删除了可折叠的nav示例，但仍然无法正常工作，因此我在想问题是如何将Bootstrap集成到我的应用程序中？

我的application.html.erb 

  <head>
    <title>ApatheticFacebook</title>
    <%= csrf_Meta_tags %>
    <%= csp_Meta_tag %>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <%= stylesheet_link_tag    'application',media: 'all','data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
    <header class="jumbotron jumbotron-fluid container-fluid px-5 fixed-top">
      <nav class="navbar navbar-expand-lg">
        <h1 class="col-7"><span class="d-none d-md-inline">Apathetic Facebook</span><span 
          class="d-md-none">AF</span> :/</h1>
        <% if user_signed_in? %>
          <button class="navbar-toggler hamburger hamburger--minus" type="button" data- 
             toggle="collapse" data-target=".navbar-collapse">
            <span class="hamburger-Box">
              <span class="hamburger-inner"></span>
            </span>
          </button>
          <div class="collapse navbar-collapse" id="collapsible-btns">
            <div class="navbar-nav ml-auto">
              <%= link_to 'Home',posts_path,class: "nav-link" %></li>
              <%= link_to 'Profile',user_path(current_user),class: "nav-link mx-4" %></li>
              <%= link_to 'Sign Out',destroy_user_session_path,method: 'delete',class: "nav- 
               link" %></li>
            </div>
          </div>
        <% end %>
      </nav>
    </header>

我的gemfile 

gem 'bootstrap'

gem 'jquery-rails'

gem 'gravtastic'

gem 'hamburgers','~> 1.1','>= 1.1.3'

我的application.scss 

...
 * It is generally better to create a new file per style scope.
 *
 */
 
 $hamburger-layer-color: white !default;
 @import "hamburgers";
 
 @import "custom";
 
 @import "bootstrap";

还有我的application.js 

// about supported directives.
//
//= require jquery_ujs
//= require jquery3
//= require popper
//= require turbolinks
//= require bootstrap
//= require_tree .

我正在整理我的第一个作品集，并希望这是一个大型项目，所以我真的不想放弃。感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4collapseexpandnavbarnavbarruby-on-rails