Bootstrap導航欄樣式不生效的原因
今天在看bootstrap教程，想要將代碼復制粘貼到編譯器中運行，可是無法將效果正常顯示
情況如下：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://www.cnblogs.com/xxxxxu/css/bootstrap.min.css">
<script src="https://www.cnblogs.com/xxxxxu/js/jquery-3.6.0.min.js"></script>
<script src="https://www.cnblogs.com/xxxxxu/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation">
<div >
<div >
<a href="https://www.cnblogs.com/xxxxxu/p/#">菜鳥教程</a>
</div>
<div>
<ul >
<li ><a href="https://www.cnblogs.com/xxxxxu/p/#">iOS</a></li>
<li><a href="https://www.cnblogs.com/xxxxxu/p/#">SVN</a></li>
<li >
<a href="https://www.cnblogs.com/xxxxxu/p/#" data-toggle="dropdown">
Java <b ></b>
</a>
<ul >
<li><a href="https://www.cnblogs.com/xxxxxu/p/#">jmeter</a></li>
<li><a href="https://www.cnblogs.com/xxxxxu/p/#">EJB</a></li>
<li><a href="https://www.cnblogs.com/xxxxxu/p/#">Jasper Report</a></li>
<li ></li>
<li><a href="https://www.cnblogs.com/xxxxxu/p/#">分離的鏈接</a></li>
<li ></li>
<li><a href="https://www.cnblogs.com/xxxxxu/p/#">另一個分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
最終通過排查，發現了問題所在
原因是我下載的Bootstrap代碼版本不匹配
后來通過下載正確版本，可以正確顯示
另一個原因
還有一種情況也會使得樣式不生效
那就是匯入順序出錯
<link rel="stylesheet" href="https://www.cnblogs.com/xxxxxu/css/bootstrap.min.css"> <script src="https://www.cnblogs.com/xxxxxu/js/jquery-3.6.0.min.js"></script> <script src="https://www.cnblogs.com/xxxxxu/js/bootstrap.min.js"></script>
如果不是按照這樣的順序，而是將jquery放在了bootstrap下面，也無法生效，
因為bootstrap需要jquery的依賴
但在bootstrap5中解除了這種依賴
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/468780.html
標籤：Html/Css