个人中心
gpt4 book ai didi

javascript - Bootstrap JQuery 加载两次 - 导航栏在移动 View 中不会折叠

转载 作者：行者123 更新时间：2023-11-28 04:01:43 24 4
gpt4 key购买 nike

大家好，我的 Rails 开发人员 friend 们，

这是一个奇怪的事情。我的 Bootstrap 导航栏不会在移动 View 中折叠；相反，当我重新启动 Rails 服务器并刷新 View 时，导航栏以折叠状态显示半秒，然后返回展开模式。

看起来 Jquery 可能会加载两次，或者可能在被我的应用程序的另一个设置删除/覆盖后正确加载。我无法弄清楚...

gem 文件:

ruby "2.4.1"
gem 'rails', '~> 5.1.4'
gem 'pg', '~> 0.18'
gem 'puma', '~> 3.7'
gem 'uglifier', '>= 1.3.0'
gem 'devise'
gem 'devise-i18n'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 5.0'
gem 'jquery-rails'
gem 'simple_form'
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'letter_opener'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

应用程序.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@import url("header.scss");
@import url("footer.scss");
@import url("background.scss");


/* Remove the required * next to email field */
abbr[title="required"] {
  display: none;
} .....

application.js

//= require jquery
//= require rails-ujs
//= require bootstrap
//= require smooth_scroll
//= require_tree .

我已经按照官方documentation的流程进行操作了

唯一可能发生冲突的操作是我最初安装了 Bootstrap 4.0，但必须降级到 Bootstrap 3.0，因为 simple_form gem 目前与 Bootstrap 4.0 不兼容。之前使用 Bootstrap 4 运行良好。

可以看到该应用程序的实时版本Here

如何发现问题？确实非常感谢

最佳答案

如下所述answer

Bootstrap 使用媒体查询创建导航栏折叠效果

CSS3 allows media dependent style-sheet by media (viewport?) and detect things such as width/height

More reading on media query at the following link:

现在您可以去测试/检查在以下 navbar example 中执行的 css 和 @media 查询

您可以看到导航栏有两个主要组件，这些组件将始终显示:

<div class='navbar-header'></div>

以及当视口(viewport)小于 750px 时将隐藏的内容

<div id="navbar" class="navbar-collapse collapse"></div>

如果您检查css第一个属性div你看到它有 display:block ，而第二个具有以下 css 样式:

当页面宽度更宽时 768px它将拥有属性 display: block!important; 

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

此属性将从 div 中丢失当 width低于768px ，那么将基于 class collapse 应用另一个属性那div有。

.collapse {
  display: none;
}

display:none将隐藏那些 divs并让您的 navbar响应式

此属性包含在行 3462 中的bootstrap.css

那么你的问题是什么(我很无聊，我知道:-))

问题是什么

这是html您的代码div 

<div class='collapse navbar-collapse'></div>

这是css那种风​​格div .

在行4534您有一个媒体查询 min-width:768px不应该应用这一点。从代码中可以看到，这个媒体查询改变了display: none至display:block !important 

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block !important;
}

application-8e3…bc19c7f7.css:5
.collapse {
    display: none;
}

但这不应该发生，因为 window现在的宽度是 337px 。我真的不知道这个问题的明确解决方案，但我可以告诉你。

您可以打印screen在控制台上查看 js 变量并阅读更多信息 here

所以如果我的页面宽度设置为 475px使用开发人员工具栏，然后我转到控制台并输入 screen 

screen
Screen {availWidth: 475, availHeight: 893, width: 475, height: 893, colorDepth: 24, …}

所以宽度是475就像在我的开发者控制台中一样，所以我在想的是，js 效果没有运行，因为 js 已损坏。它没有响应，因为js没有被触发。

解决方案

您可以通过添加 application.html.erb 来解决此问题文件如下html代码

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>

我在您的页面上对此进行了测试，问题已解决，如您从屏幕截图中看到的

enter image description here

关于javascript - Bootstrap JQuery 加载两次 - 导航栏在移动 View 中不会折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47049414/

24 4 0
文章推荐： c++ - 在 WM_COMMAND win32 GUI C++ 中处理 WM_LBUTTONDOWN 和 WM_LBUTTONUP
文章推荐： javascript - CSS UI框架和jQuery UI有什么区别
文章推荐： javascript - 如何获取所有具有固定起始字符串的html元素
文章推荐： html - Bootstrap : centering content in Nav and changing default beavior on smaller screens