html file 부트 스트랩 기본 네비게이션 예 from this page으로 만들었습니다. Chrome, Firefox 또는 IE에서 파일을 열면 드롭 다운 메뉴가 작동하지 않습니다. 그러나 bootstrap webpage showing the example은 Chrome에서 작동합니다. 내가 도대체 뭘 잘못하고있는 겁니까?부트 스트랩 기본 navbar 드롭 다운이 작동하지 않음
-3
A
답변
0
파일에서 다음과 같이 jquery 및 bootstrap js cdns를 첨부해야합니다.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="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="#">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 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
0
당신은 부트 스트랩 작업을 할 수있는 부트 스트랩 자바 스크립트를 참조하기 전에 jQuery를에 대한 참조를 포함해야합니다. 그리고 당신은 또한 body
요소 내에 기존 script
요소를 이동해야합니다 같아요 : 외부 자원이 HTML 코드 내에서 표시되지 않더라도
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's a working fiddle을. 위의 답변에 aition에서 웹 개발에 새로운으로
0
내가 추가 할 두 개 더 points--
1 위 페이지에 두 번 부트 스트랩 DNS를 추가하지 마십시오, 모든 생성합니다 그런 종류의 문제.
2 호는 다음 order--
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
관련 문제
- 1. 부트 스트랩 navbar 드롭 다운이 작동하지 않습니다.
- 2. 앵글 부트 스트랩 0.12.0 navbar 드롭 다운이 작동하지 않음
- 3. 각도 JS 2 - 부트 스트랩 navbar 드롭 다운이 작동하지 않음
- 4. 부트 스트랩 로그인 드롭 다운이 "작동하지 않음"
- 5. 부트 스트랩 드롭 다운이 드롭 다운되지 않음
- 6. 부트 스트랩 드롭 다운이 안쪽에서 작동하지 않음
- 7. 부트 스트랩 navbar 드롭 다운이 오른쪽으로 정렬됩니다
- 8. 부트 스트랩 Navbar 드롭 다운이 항상 열려 있지 않음
- 9. 부트 스트랩 3 드롭 다운이 표시되지 않음
- 10. django 부트 스트랩 드롭 다운이 작동하지 않습니다.
- 11. 부트 스트랩 드롭 다운이 ASP.NET에서 작동하지 않습니다.
- 12. 부트 스트랩 드롭 다운이 다운되지 않음
- 13. Codeignitor에서 부트 스트랩 드롭 다운이 작동하지 않습니다.
- 14. 탐색 메뉴 드롭 다운이 작동하지 않음 Angular2 부트 스트랩 3
- 15. 부트 스트랩 드롭 다운이 작동하지 않습니다.
- 16. 부트 스트랩 드롭 다운이 작동하지 않습니다.
- 17. 부트 스트랩 navbar에서 드롭 다운이 작동하지 않습니다.
- 18. 부트 스트랩 navbar 드롭 다운이 한 페이지에서만 작동하지 않습니다.
- 19. 부트 스트랩 4 navbar 드롭 다운이 작동하지 않습니까?
- 20. 특정 URL에서 Navbar 부트 스트랩 드롭 다운이 작동하지 않습니다.
- 21. 부트 스트랩 드롭 다운이 제대로
- 22. 부트 스트랩 드롭 다운이 맞지 않음
- 23. 부트 스트랩 드롭 다운이 열리지 않음
- 24. 전자에서 부트 스트랩 드롭 다운이 작동하지 않습니다.
- 25. 부트 스트랩 드롭 다운이 RequireJs
- 26. Navbar 드롭 다운이 작동하지 않습니다.
- 27. 부트 스트랩 드롭 다운이 반 시간에만 작동합니다.
- 28. 부트 스트랩 navbar 응답 드롭 다운이 터치에 응답하지 않습니다.
- 29. 부트 스트랩 탐색 모음 드롭 다운이 열리지 않음
- 30. 유성에서 부트 스트랩 드롭 다운이 작동하지 않습니다.
당신은 부트 스트랩 작업을하기 위해 jQuery를에 대한 참조를 포함해야합니다에 CDN s을 (를) 추가합니다. –
나는 완전히 웹 개발에 새로운 ... 어떻게 그럴 수 있습니까? 타이 – pcantalupo