Bootstrap導航欄列表項目/鏈接未顯示

我正在學習使用Bootstrap並使用組件，特別是導航欄。我的鏈接/列表項目未顯示，已直接從Bootstrap複製。希望有人能向我解釋我失蹤的事情。Bootstrap導航欄列表項目/鏈接未顯示

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title>NavBar</title> 

    <!-- bootstrap css --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
</head> 

<body> 


    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Navbar</a> 
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
      <div class="navbar-nav"> 
       <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
       <a class="nav-item nav-link" href="#">Features</a> 
       <a class="nav-item nav-link" href="#">Pricing</a> 
       <a class="nav-item nav-link disabled" href="#">Disabled</a> 
      </div> 
     </div> 
    </nav> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"> 
    </script> 
</body>

預先感謝您

來源

2017-03-10 Jessica

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h – vishalgelani

在引導4中，需要navbar-expand-*類顯示水平導航欄，否則會崩潰到它的移動狀態。

確保您在Codepen正確引用它作爲https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

或者，使用Codeply，這將包括所有您相關的庫： Bootstrap 4 on Codeply

這裏的導航欄與引導4.0.0： http://www.codeply.com/go/SmEyy7rg5S

來源

2017-03-10 01:52:32 ZimSystem

您參考他們的css文件沒有什麼是他們的網站上列出。使用以下命令：

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

您的Java腳本文件也沒有什麼上市：

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

在這裏你可以找到最新的鏈接到他們的最先進的最新CDN的：http://getbootstrap.com/getting-started/

您可能已將其從實驗場所複製過來。（它表示文件名中包含alpha，因此可能存在一些錯誤）

來源

2017-03-10 01:11:59

看起來您使用的是bootstrap的alpha版本。該版本可能包含一個錯誤。您可能想要使用最新的穩定版本。 This answer具有指向版本3.3.7的正確css和js文件的鏈接。如果在此答案後更新了引導程序，則可以在http://getbootstrap.com/getting-started/下載最新版本。希望這可以幫助！

阿爾伯特

來源

2017-03-10 01:21:32

Bootstrap導航欄列表項目/鏈接未顯示

回答

相關問題