Bootstrap burger 導航菜單未在移動瀏覽器中打開
[英]Bootstrap burger nav menu not opening in mobile browser
問題描述
我正在使用引導樣式表。
以下代碼適用於我的導航面板。 這在我的桌面瀏覽器上運行良好，但是當我減小瀏覽器大小或在移動設備上測試時，漢堡菜單出現但沒有按預期擴展以顯示導航內容。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <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 color-me" href="#home">Home</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about-me">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="##">Page 1</a></li> <li><a href="##">Page 2</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <!-- container --> </nav>
我的 HTML 中是否缺少某些內容？ 我不明白問題出在哪里！
3 個解決方案
解決方案1
1 已采納 2018-01-31 12:13:28
請包括這一行，並將工作。
注意：以這個順序包含——在 Bootstrap 之前包含 Jquery。Bootstrap 需要在 Bootstrap 之前加載 Jquery。
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
您缺少 javascript 庫，因此事件沒有響應，
解決方案2
1 2018-01-31 13:04:24
似乎您錯過了包含 bootstrap js 文件。 請檢查https://getbootstrap.com/docs/3.3/getting-started/
解決方案3
1 2020-03-15 17:04:51
我想使用 bootstrap.min.js 解決問題不會解決問題，除非你沒有在 bootstrap@3 中包含 jquery
還請包含以下鏈接或通過javascript的dist文件夾獲取
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
切換到移動視圖時，Bootstrap Toggle Burger Menu 不起作用
[英]Bootstrap Toggle Burger Menu not working when switched to mobile view
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.