為什么導航欄無法在Bootstrap中正確顯示？
[英]Why isn't the navbar showing correctly in Bootstrap?
問題描述
我在嘗試使用Bootstrap創建導航欄時遇到此錯誤，結果應該是導航欄，但不是，試圖了解我復制W3schools代碼的錯誤的本質（ https://www.w3schools.com/bootstrap/bootstrap_navbar。 asp ）在編輯器（Atom）中。 我的代碼和W3schools的代碼均無法正常工作，但似乎編寫正確。 我哪里錯了？ 我可以幫忙嗎？
這是我的代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <body> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <nav class=“navbar”> <nav class="navbar"> <a class="navbar-brand" href=“#”>Something</a> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">One</li> </ul> </nav> </body> </html>
3 個解決方案
解決方案1
0 2017-12-24 17:36:33
在包含引導程序之前，應包含jquery ...例如：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
解決方案2
0 2017-12-24 17:49:57
從此更改您的文本格式的引號。
<nav class=“navbar”>
到非文本格式的引號。
<nav class="navbar">
解決方案3
0 2017-12-24 17:52:48
在您的代碼中，您使用的是最新版本的Bootstrap 4.x，它完全不同，許多東西在3.x和4.x之間看起來很相似，但總而言之，在3.x中工作的任何東西都有更多機會被入侵4.x。
因此，不要使用W3School的代碼作為參考，而是使用適用於版本4.0的Twitter Bootstrap文檔： https : //getbootstrap.com/docs/4.0/getting-started/introduction/
另外，您的HTML代碼看起來不太正確，例如此行
<li class="nav-item"><a href="#" class="nav-link">One</li>
您忘記關閉<a> 。 因此，重要的是要查看代碼，看看是否是由語法錯誤引起的。 除此之外，如果修復該代碼，則可以從HTML獲得輸出。 導航欄沒什么，因為您必須遵循Twitter Bootstrap 4的布局導航欄指南
https://getbootstrap.com/docs/4.0/components/navbar/
另一個問題是，您將boostrap.min.js放在jQuery之前， boostrap.min.js Bootstrap的JavaScript正常工作，您首先必須加載jQuery。
祝好運。
Bootstrap 導航欄崩潰無法正常工作 || 導航欄折疊不顯示點擊鏈接
[英]Bootstrap navbar collapse not working correctly || navbar collapse not showing links on clicking
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.