Bootstrap導航欄切換按鈕不起作用

Question

當頁面縮小到平板電腦/手機大小時，顯示切換按鈕，但不起作用。 這是HTML

 <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a> </div> <div class="collapse navbar-collapse" id="bs-nav-demo"> <ul class="nav navbar-nav"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> .... .... <script type="text/javascript" href="https://code.jquery.com/jquery-2.2.1.js"></script> <script type="text/javascript" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

必要的javascript已鏈接。

Answer 1

所以我找到了問題； 這是非常輕微的。 href屬性應在腳本標簽上替換為src屬性。 腳本的Sublime Text標簽頁默認為href。

Answer 2

 .navbar-toggle { background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; float: right; left: -300px; margin-bottom: 8px; margin-right: 15px; margin-top: 8px; padding: 9px 10px; position: relative; } body{ width: 400px !important; } 

 <link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a> </div> <div class="collapse navbar-collapse" id="bs-nav-demo"> <ul class="nav navbar-nav"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> .... .... <script src="https://code.jquery.com/jquery-2.2.1.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 3

也調用bootstrap.css。 在這里，我只是從本地文件中調用它

<link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/>

您可以從CDN調用它。 同樣，要調用js文件，請使用“ src”而不是“ href”。 謝謝。

 .navbar-toggle { background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; float: right; left: -300px; } 

 <link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a> </div> <div class="collapse navbar-collapse" id="bs-nav-demo"> <ul class="nav navbar-nav"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> .... .... <script src="https://code.jquery.com/jquery-2.2.1.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>