Bootstrap 3固定頂部導航欄

Question

我正在嘗試使用Bootstrap 3固定頂部導航欄。 但是，當我減小瀏覽器屏幕尺寸並單擊按鈕時，它不顯示任何鏈接

這是代碼

<!DOCTYPE html>
<html>
<head>  
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>    

<body>

    <!-- Creating a Fixed (top) Navigation Bar with Dropdown -->  
    <div class="navbar navbar-default navbar-fixed-top">    
        <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="icon-bar"></span>  
                   <span class="icon-bar"></span>  
                   <span class="icon-bar"></span>               
              </button>
              <a href="#" class="navbar-brand">Exclusive</a>
            </div>     

            <div class="navbar-collapse collapse">                
                <ul class="nav navbar-nav">
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>                       

        </div>    
    </div>  
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/jquery-1.11.3.js"></script>

</body>
</html>

但是在調整大小並單擊切換按鈕時，它不會顯示鏈接

我已包含所需的jquery文件。

Answer 1

您將得到script錯誤$ is undefined因為如下所示的腳本加載方式是錯誤的。

<script src="bootstrap/js/bootstrap.min.js"></script><!--Either keep this-->
<script src="bootstrap/js/bootstrap.js"></script> <!--or this-->
<script src="bootstrap/js/jquery-1.11.3.js"></script><!--should come first-->

在加載任何.js文件之前，您需要加載jquery-*.js

所以最終您需要

<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

因此，您可以使用bootstrap.js或bootstrap.min.js但不能同時使用兩者。 那會造成沖突！

演示

Answer 2

不是 Error 。 其Bootstrap 3響應頁面功能 。 當您在小屏幕或手機上打開頁面時，它將自動調整模板頁面視圖 。

當您單擊 右側圖標時，您可以在此處看到您的鏈接。

我認為這是您想要的解決方案：

如果您希望在小型設備上打開頁面時出現“鏈接” 。 那么您必須在HTML Page中更改class-name 。

代替“ navbar-Collapse ”和“ Collapse ”，使用“ navbar-Expand ”和“ Expand ”

注意：請在優先順序中包含您的js文件。 它將對您的未來發展有所幫助。

<script src="js/jquery-2.1.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

我的HTML代碼在這里：

  <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> </head> <body> <!-- Creating a Fixed (top) Navigation Bar with Dropdown --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle " data-toggle="Expand" data-target=".navbar-Expand"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Exclusive</a> </div> <div class="navbar-Expand Expand"> <ul class="nav navbar-nav"> <li><a href="#" class="text-center">Products</a></li> <li><a href="#" class="text-center">Blog</a></li> <li><a href="#" class="text-center">About</a></li> <li><a href="#" class="text-center">Contact Us</a></li> </ul> </div> </div> </div> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

看到輸出圖像：

Answer 3

您的代碼有誤。

第一個jQuery.js。 還有下一個bootstrap.js
將<div class="navbar" ...></div>更改為<nav class="navbar" ...></nav>

[結果] https://jsfiddle.net/u2v1nLpb/3/

<body>

        <!-- Creating a Fixed (top) Navigation Bar with Dropdown -->  
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                        <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">Exclusive</a>
                </div>     

                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>                       

            </div>    
        </nav>
    <script src="bootstrap/js/jquery-1.11.3.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>

Bootstrap 3固定頂部導航欄

問題描述

3 個解決方案

解決方案1
1 2015-08-27 05:42:54

解決方案2
0 2015-08-27 06:38:26

解決方案3
0 2015-08-27 06:50:02

Bootstrap 3固定頂部導航欄

問題描述

3 個解決方案

解決方案1 1 2015-08-27 05:42:54

解決方案2 0 2015-08-27 06:38:26

解決方案3 0 2015-08-27 06:50:02

解決方案1
1 2015-08-27 05:42:54

解決方案2
0 2015-08-27 06:38:26

解決方案3
0 2015-08-27 06:50:02