부트 스트랩 드롭 다운 메뉴가 작동하지 않음
드롭 다운을 작동시키는 데 문제가 있습니다. navbar를 완벽하게 표시 할 수 있지만 "Dropdown"(둘 중 하나)을 클릭하면 드롭 다운 메뉴가 표시되지 않습니다. 나는 이것에 대해 다른 게시물을 찾아 보았지만 모든 사람의 문제를 해결하는 것은 도움이되지 않았습니다. 부트 스트랩 웹 사이트에서 직접 소스를 복사했지만 내 컴퓨터에서 작동하지 않는 것 같습니다. 누구나 아이디어가 있습니까? 나는 한 시간 동안 그것을 쳐다 보았고 문제가 무엇인지 알아낼 수없는 것 같습니다.
<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
어쩌면 시도
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
작동하는지 확인하십시오.
부트 스트랩 + 레일 프로젝트가 있었고 드롭 다운이 제대로 작동했습니다. 그들은 업데이트 후 작동을 멈췄습니다 ...
이것이 문제를 해결 한 솔루션입니다. .js 파일에 다음을 추가하십시오.
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
100 % 작업 솔루션
모든 js 및 css 링크보다 먼저 Jquery 링크를 배치하십시오.
Example Correct
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
Example Wrong!
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Put the jquery js link before the bootstrap js link like so:
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
instead of:
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
I faced this while I was using ASP .NET Forms. The solution I used was deleting or commenting out jQuery and Bootstrap references from the <asp:ScriptManager runat="server"> in the master page. It seems it creates a conflict with the jQuery and Bootstrap references that you put in the <header>.
I am using rails 4.0 and ran into the same problem
Here is my solution that passed test
add to Gemfile
gem 'bootstrap-sass'
run
bundle install
then add to app/assets/javascripts/application.js
//= require bootstrap
Then the dropdown should work
By the way, Chris's solution also work for me.
But I think it is less conform to the asset pipeline idea
In case anyone still facing same problem be sure to check your your view Page source in your browser to check whether all the jquery and bootstrap files are loaded and paths to the file are correct. Most important! make sure to use latest stable jquery file.
According to getBootstrap.com, dropdowns are built on third-party library Popper.js. So, if the dropdown menu does not work onclick but is working only on hover of the dropdown include popper.js, bootstrap.js and bootstrap.css. Not including popper.js before including bootstrap bundles could be one of the reasons.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>
https://getbootstrap.com/docs/4.0/components/dropdowns/
Maybe someone out there can benefit from this:
Summary (a.k.a. tl;dr)
Bootstrap dropdowns stopped dropping down due to upgrade from django-bootstrap3 version 6.2.2 to 11.0.0.
Background
We encountered a similar issue in a legacy django site which relies heavily on bootstrap through django-bootstrap3. The site had always worked fine, and continued to do so in production, but not on our local test system. There were no obvious related changes in the code, so a dependency issue was most likely.
Symptoms
When visiting the site on the local django test server, it looked perfectly O.K. at first glance: style/layout using bootstrap as expected, including the navbar. However, all dropdown menus failed to drop down.
No errors in the browser console. All static js and css files were loaded successfully, and functionality from other packages relying on jquery was working as expected.
Solution
It turned out that the django-bootstrap3 package in our local python environment had been upgraded to the latest version, 11.0.0, whereas the site was built using 6.2.2.
Rolling back to django-bootstrap3==6.2.2 solved the issue for us, although I have no idea what exactly caused it.
Looks like there is more to be done for Rails 4.
Inside you Gemfile add.
gem 'bootstrap-sass', '~> 3.2.0.2'
Next you need to run
$bundle install
This is the part no one has mentioned
Open you config/application.rb file
add this right before the second to last end
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
as seen here about a 20% down the page.
Next create a custom.css.scss file in this directory
app/assets/stylesheets
as seen here a little further down from the above task
Inside that file include
@import "bootstrap";
Now stop your server and restart and everything should work fine.
I tried to run bootstrap without using a gem but it didn't work for me.
Hope that helps someone out!
I think it's the matter of the route of your route file. Not the bootstrap nor the JQuery file.
In my case, disabling Chrome Extensions fixed it. I removed them from Chrome one by one until I found the culprit.
Since I'm the author of the offending Chrome extension, I guess I better fix the extension!
My bootstrap version was pointing to bootstap4-alpha,
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
changed to 4-beta
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
and it started working
the problem is that href is href="#" you must remove href="#" in all tag
For Bootstrap 4 you need an additional library. If you read your browser console, Bootstrap will actually print an error message telling you that you need it for drop down to work.
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
in angular projects we add angular-cli.json or angular.json theses lines:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
I tried all the above answers and the only version who works for me is the jquery 1.11.1. I tried with all the other versions 1.3.2, 1.4.4, 1.8.2, 3.3.1 and navbar dropdown doesn't work.
<script src="jquery/jquery-1.11.1.min.js"></script>
Just use this 100% working trick to resolve your dropdown menu problem of Bootstrap.
Paste both these files any where in the page after opening of body tag. If you paste them inside body tag then your problem persists.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
참고URL : https://stackoverflow.com/questions/22383547/bootstrap-dropdown-menu-is-not-working
'developer tip' 카테고리의 다른 글
| onActivityResult ()가 조기에 호출되었습니다. (0) | 2020.08.31 |
|---|---|
| 저장소에 있지 않고 Git 명령을 실행하려면 어떻게해야합니까? (0) | 2020.08.31 |
| PHP에서 익명 함수를 즉시 실행하려면 어떻게해야합니까? (0) | 2020.08.30 |
| Gdb는 stdout 대신 파일로 인쇄 (0) | 2020.08.30 |
| 번 들러 대 RVM 대 gems 대 RubyGems 대 gemsets 대 시스템 루비 (0) | 2020.08.30 |