如何使用Turbolinks扩展Bootstrap导航栏

pbgvytdp  于 12个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(171)

在我的Rails 4应用程序中,我使用的是Bootstrap的导航栏。当导航栏折叠时,它并不总是在点击时展开/切换。菜单图标显示,但当你点击它时,它不做任何事情:
x1c 0d1x的数据
我知道它与Turbolinks有关,因为它从来不会在我手动输入视图的url时发生,只有在我点击链接后才会发生。而且,当我从应用程序中完全删除Turbolinks时,它就会消失。
基于这些问题:

我试过这些方法,但没有一个能解决这个问题:
1.将样式表和JavaScript移动到Body
1.为所有JavaScript和样式表设置data-turbolinks-track ='false' 1.为所有JavaScript和样式表设置'data-turbolinks-eval' => false1.使用jquery-turbolinks对我来说有趣的是,其他Bootstrap元素,比如菜单项,对我来说没有Turbolinks的问题。 我知道我可以删除Turbolinks`,但如果可能的话,我宁愿保留它。有什么方法可以做到这一点吗?
我的看法:

<nav class="navbar navbar-ct-danger navbar-fixed-top" role="navigation-demo" id="demo-navbar"  data-no-turbolink ="false">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2" data-no-turbolink ="false">
        <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="/">
        <%= image_tag " logo.png"%>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navigation-example-2" data-no-turbolink ="false">
      <ul class="nav navbar-nav navbar-right">
          <li>
            <%= link_to "Games", games_path %>
          </li>
          <li>
            <%= link_to "Days", days_path %>
          </li>
       </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-->
</nav>

字符串
Gemfile

gem 'jquery-rails', '4.0.5'
gem 'turbolinks', '2.5.3'
gem 'jquery-turbolinks', '2.1.0'


application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

3pmvbmvn

3pmvbmvn1#

对于任何在2023年或之后使用Rails 7,Bootstrap 5和turbo-rails gem的人来说(因为是的,这仍然是一个问题,我花了几天时间试图解决它,因为没有旧的Rails 4/5 + jquery解决方案适用,因为Bootstrap 5不再使用jquery)我终于找到了解决问题的方法:
data-turbo="false"添加到view layout .html.erb文件中最外层的导航栏HTML元素中。这似乎可以防止导航栏成为“没有真正重新加载”问题的牺牲品,但可以在其他地方使用turbo保持高性能。
范例:

<nav class="navbar navbar-expand-md sticky-top mt-0 pt-0" data-turbo="false">

字符串
来自turbo官方文档:https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms

相关问题