Bootstrap 的 javascript 在本地工作，但在部署到服務器時不起作用

Question

我下載了 Twitter 引導程序的准系統示例並對其進行了自定義。 我在本地（使用 WAMP 服務器）對其進行了測試，一切正常，包括 CSS 和 JScript。

我將文件上傳到我的虛擬主機服務，但 JScript 不起作用。 我注意到它是因為下拉框停止工作。

我搜索並找到了其他有同樣問題的人，但他們都在使用 ruby​​，而我沒有。 就是bootstrap提供的播放CSS+JScript。 此外，他們說解決方案是先包含 bootstrap.js，然后是 jquery.js。 好吧，我試過了，但沒有用，我什至包含了未縮小的 .js，但仍然沒有用。

我使用相同的瀏覽器 (Chrome) 進行本地和遠程測試。 我還嘗試了不同的托管服務，但兩者都出現了問題。

非常感謝幫助。

---

其他類似問題：

• Javascript 功能在本地主機上工作，但在部署到 Heroku 時不起作用
• twitter bootstrap 下拉突然不起作用

Answer 1

問題可能是您在 jQuery 之前加載了 boostrap.js。 在本地，您的瀏覽器可能正在使用 Jquery 的緩存副本，因此它可以在本地運行，但不能在您的實時站點上運行。 嘗試通過切換代碼中的這兩行來修復它：

<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>

Answer 2

我知道這很奇怪，但我想我得到了解決方案。 以前我使用的是（提供的）jQuery 1.7.2 縮小版。 現在我將其更改為使用未縮小的 jQuery 1.8.0。 它剛剛開始工作......我做的另一件事是將所有文件的編碼轉換為UTF8（我認為這是真正的問題/解決方案）

Answer 3

我有同樣的問題。 在 IE 中，該站點在 localhost 上運行，但在托管在其他服務器上時卻沒有。 添加以下元標記修復了它。

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Answer 4

我遇到了完全相同的問題，所以很高興找到這篇文章和其他喜歡它的人。 我的決心是相似的。 我拉了半天的頭發嘗試所有不同的東西。 遛狗。 喝了半打啤酒。 睡在上面。 吃過早飯。 將頂部的樣式表和底部的 js 從本地 html 重新復制到服務器 php，然后由於某種未知原因它再次開始工作。 對其他經歷相同的人似乎有用的唯一要點：

• 試着回到一個工作場景——在我的例子中，index.html 在服務器上工作，而不是 index.php。 讓這些完全相同是關鍵。
• 嘗試在不同的瀏覽器上以防萬一發生奇怪的事情。
• 確保您一直清除瀏覽器緩存（例如，右鍵單擊 Chrome 中的重新加載按鈕並選擇“清空緩存和硬重新加載”）
• 檢查您的引導程序 css 和 js 版本。 在版本中向前和向后更改它們，直到成功。 很有可能，您的引導程序主題下載附帶的版本是最有可能工作的版本。

Answer 5

我之前遇到過類似的問題。 tabs 功能在我的 HTML 站點中運行良好，但在編碼為 Wordpress 主題時不起作用。 所有源 URL 都是使用 Wordpress 的 .

當我添加所有 JS 鏈接（除了 Modernizr 到頁腳而不是頁眉中）時，選項卡終於開始工作了。

Answer 6

回歸基礎：如果 Debug 在本地機器上設置為 true 而在部署環境中設置為 false，請確保您的 .min.js 文件沒有覆蓋您對 .js 文件的非縮小版本所做的自定義（也適用於 .css）。

您還可以在本地機器上關閉調試，您應該會看到相同的問題。

Answer 7

聚會遲到了，但我發現我的問題是Bootstrap.js在部署過程中沒有被推出。

Answer 8

除了@dialex 和@Darrell 非常有用的建議之外，我還要補充一點，如果這些建議都不起作用，您可以查看您可能鏈接到的任何代碼，即。 通過require ('page.php'); ，對於重復。 重復的 .js 鏈接往往會導致這些問題。

Answer 9

我在我構建並上傳到 Amazon S3 的網站上遇到了這個問題。 在我的本地機器甚至我的本地服務器上都可以正常工作，但是從亞馬遜提供服務時卻無法正常工作。 Firefox（但不是 Chrome）中的控制台顯示它無法加載 bootstrap.min.css（等），因為它們的 MIME 類型不是 text/css。

我不得不使用 S3 控制台強制將它們的類型更改為 text/css、清除緩存和重新加載。 瞧！

Answer 10

我正在使用 Codeigniter。 我通過更改 config.php 中的base_url解決了這些問題。

以前的 ：

$config['base_url'] = 'http://localhost/public_html';

更改為：

$config['base_url'] = 'http://(my intranet server ip adress)/public_html';

Answer 11

有同樣的問題

在我的 .html 文件中，我有這一行

<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>

改成這樣后

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

一切正常。 我猜內部 webjars 有http並且更改 css 鏈接以https開頭解決了我的問題