引導導航欄崩潰圖標的問題
[英]issue with bootstrap nav bar collapse icon
問題描述
我正在創建一個引導網站，並試圖使導航欄可折疊工作。 無論如何，都會顯示導航切換按鈕。 當導航欄移至中等大小時，如何限制其顯示？
代碼是：
enter code here
</!DOCTYPE html> <html> <head> <title>Bootstrap Website</title> <link rel="stylesheet" href="css/styles.css" type="text/css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <!--mobile first --> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div style="background-color: black;"> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar"> <span class="navbar-toggler-icon" style="background-color: black"></span> </button> <div class="collapse navbar-collapse text-center" id="collapsenavbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a href="" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="" class="nav-link">The New Laws</a> </li> <li class="nav-item"> <a href="" class="nav-link">Get Qualified</a> </li> <li class="nav-item"> <a href="" class="nav-link">What Is Record Suspension</a> </li> <li class="nav-item"> <a href="" class="nav-link">Why Do I Need A Waiver</a> </li> </ul> </div> </div> </nav> </div> </body> </html>
1 個解決方案
解決方案1
0 2018-06-18 04:44:23
您使用引導程序4的導航代碼，並添加引導程序3的鏈接和腳本。
1.您可以添加引導程序4的鏈接/腳本，然后它可以工作：
這是腳本/鏈接：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
例：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <div style="background-color: black;"> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar"> <span class="navbar-toggler-icon" style="background-color: black"></span> </button> <div class="collapse navbar-collapse text-center" id="collapsenavbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a href="" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="" class="nav-link">The New Laws</a> </li> <li class="nav-item"> <a href="" class="nav-link">Get Qualified</a> </li> <li class="nav-item"> <a href="" class="nav-link">What Is Record Suspension</a> </li> <li class="nav-item"> <a href="" class="nav-link">Why Do I Need A Waiver</a> </li> </ul> </div> </div> </nav> </div>
2.您可以使用引導程序3： https : //www.w3schools.com/Bootstrap/bootstrap_navbar.asp
引導導航欄折疊圖標未觸發
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.