堆棧內存溢出
  簡體   English   中英

Bootstrap崩潰導航欄可在jsfiddle上使用，在實際網站上不可用

[英]Bootstrap collapse navbar works on jsfiddle, doesn't work on actual website

 原文  2014-03-26 07:08:39  3   3    javascript/ jquery/ twitter-bootstrap/ navbar

問題描述

我通常不問就找到簡單問題的答案，但是這次卻沒有。 已經好幾天了，所以我想問一下。

我在下面的HTML代碼：

  • 您會看到我嘗試做一些事情來弄清楚出了什么問題
  • 我測試以確保js庫正在加載（Google和jquery）
  • 我嘗試從bootstrap網站重新下載bootstrap.min.js（沒有變化）
  • 我試圖通過CDN獲取bootstrap.min.js
  • 我敢肯定答案很簡單，但是我不太清楚（底部的jsfiddle鏈接）

任何幫助將非常感激。 

    <!DOCTYPE html>
    <html>
    <head>
        <!-- Import all the necessary stylesheets-->
        <meta name="viewport" content ="width=device-width, inital-scale=1.0">
        <meta charset="utf-8">
        <title>This is the title</title>
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
        <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
        <!--<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">-->
        <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> -->

        <style type="text/css">
            html, body {
                font-family: "Lato";
                height: 100%;
                margin-bottom: 100px;
            }
        </style>

    </head>

    <body>
        <!--Navigation bar-->
        <div class="row-fluid">
            <div class = "navbar navbar-inverse navbar-fixed-top">
                <div class = "container">
                    <a href = "#" class = "navbar-brand">brand</a>

                    <!--Collapse menu with three lines-->
                    <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>

                    <!--Actual menu-->
                    <div class ="collapse navbar-collapse navHeaderCollapse">
                        <ul class = "nav navbar-nav navbar-right">
                            <li class = "active"><a href = "#">Home</a></li>
                            <li><a href = "#">Blog</a></li>
                            <li><a href = "#">About</a></li>
                            <li><a href = "#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>




        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <!--<script src=”js/bootstrap.js”></script>-->
        <script src=”js/bootstrap.min.js”></script>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <!--use code below to check if javasciprt library loaded-->
        <!--<script type="text/javascript">
        if (typeof jQuery != 'undefined') {
        alert("jQuery library is loaded!");
        }else{
        alert("jQuery library is not found!");
        }
        </script>-->
    </body>
</html>

這是jsfiddle工作的地方-http: //jsfiddle.net/moseslo/D2Gsa/1/

3 個解決方案

解決方案1
 0  2014-03-26 07:15:49

修正錯誤的撇號： 

<script src=”js/bootstrap.min.js”></script>

為什么還要兩次加載bootstap.min.js？

解決方案2
 0  2014-03-26 07:18:21

在此處嘗試僅使用一個Bootstrap JS版本，因此可以刪除： 

<script src=”js/bootstrap.min.js”></script>

並且僅保留： 

<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

解決方案3
 0  2014-03-26 07:20:37

有兩種可能性，應該在控制台上顯示錯誤：

  1. 您在<script src=”js/bootstrap.min.js”></script>有錯誤的“”
  2. 您沒有托管頁面，而是使用file://方案查看頁面。

無論如何，下面的固定代碼： 

<!DOCTYPE html>
<html>
<head>
    <!-- Import all the necessary stylesheets-->
    <meta name="viewport" content ="width=device-width, inital-scale=1.0">
    <meta charset="utf-8">
    <title>This is the title</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
    <!--<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">-->
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> -->

    <style type="text/css">
        html, body {
            font-family: "Lato";
            height: 100%;
            margin-bottom: 100px;
        }
    </style>

</head>

<body>
    <!--Navigation bar-->
    <div class="row-fluid">
        <div class = "navbar navbar-inverse navbar-fixed-top">
            <div class = "container">
                <a href = "#" class = "navbar-brand">brand</a>

                <!--Collapse menu with three lines-->
                <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>

                <!--Actual menu-->
                <div class ="collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">Blog</a></li>
                        <li><a href = "#">About</a></li>
                        <li><a href = "#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>




    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <!--<script src=”js/bootstrap.js”></script>-->
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!--use code below to check if javasciprt library loaded-->
    <!--<script type="text/javascript">
    if (typeof jQuery != 'undefined') {
    alert("jQuery library is loaded!");
    }else{
    alert("jQuery library is not found!");
    }
    </script>-->
</body>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Bootstrap 4 導航欄折疊不起作用 Bootstrap導航欄折疊不起作用 Bootstrap 4 導航欄折疊不起作用 [不保持打開狀態] 導航欄（折疊）按鈕不起作用 Bootstrap 5.1.3 React.js 中的引導程序 - 導航欄折疊不起作用 Bootstrap Collapse無法正常工作，但可以在JSFiddle中使用 代碼在jsfiddle中有效，但是當我將所有代碼放入網站時不起作用 Bootstrap 4 - 隱藏導航欄折疊有效，但鏈接無效 手風琴在 Bootstrap 4 崩潰中不起作用 Bootstrap導航欄在從移動設備訪問時不會崩潰，在收縮桌面瀏覽器時可以正常工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM