使用django-bootstrap3創建導航欄切換困難

我想使用django-bootstrap3將簡單的導航欄添加到我的網站。我正在編輯的base.html文件用於創建導航欄，它與Twitter Bootstrap一起使用，但不與django-bootstrap3一起使用。我遇到的問題是應該切換下拉列表的按鈕在點擊時不會執行任何操作。有沒有人遇到過這個問題？使用django-bootstrap3創建導航欄切換困難

這是我base.html文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>{% block title %}{% endblock title %}</title> 

{% load bootstrap3 %} 
{% bootstrap_css %} 
{% bootstrap_javascript %} 

<style> 
    body { 
     padding-top: 70px; 
    } 
</style> 

    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

</head> 

<body> 

<!------Navbar ----------> 

<header class = "navbar navbar-inverse navbar-fixed-top" role = "banner"> 
<div class = "container"> 
    <div class ="navbar-header"> 
     <button type = "button" class= "navbar-toggle" data-toggle = "collapse" data-target = "#dropdown"> 
      <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">Project Name</a> 
    </div><!-- End Navbar Header--> 

    <div class = "collapse navbar-collapse" id = "dropdown"> 

     <ul class = "nav navbar-nav navbar-right" role = "navigation"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">New Page</a></li> 
      <li><a href="#">New Page</a></li> 
      <li><a href="#">New Page</a></li> 
     </ul>  

    </div><!-- End Nav Contents --> 
</div><!-- End Container --> 
</header>

來源

2014-09-22 Michael Sullivan

您可能在查找靜態文件的位置時遇到一些問題。看看你的settings.py，以確保這是有道理的。另外，查看html的源代碼，看看是否有東西沒有被訪問。 – 2014-09-22 19:20:11

當訪問base.html看你的終端日誌..任何干擾..？ – 2014-09-23 10:59:13

沒有干擾。我一直在閱讀文檔，不幸的是，它沒有寫關於數據切換或數據目標的任何內容。我在我的settings.py文件中看不到任何問題，其他所有內容都已經呈現得很好。 – 2014-09-23 13:04:27

的問題是，Django的bootstrap3的JavaScript需要安裝的jQuery（我曾錯誤地認爲Django的bootstrap3自動完成這一任務）。只要我引用jquery，問題立即修復。

來源

2014-09-29 22:55:27

你能詳細說明你如何正確引用jquery嗎？我有一個非常類似的問題。 – cr1msonB1ade 2015-07-11 00:03:25

django-bootstrap3的默認設置是不包括jquery加載。所以你可以添加鏈接來加載jquery，或者更改默認設置。看看@ https://django-bootstrap3.readthedocs.io/en/latest/settings.html。具體來說，＃將jQuery與Bootstrap JavaScript結合使用（影響django-bootstrap3模板標籤） 'include_jquery'：True， – 2016-05-18 12:24:18

我知道這個話題爲2歲，但在情況下有同樣的問題在未來的危機，這裏的解決方案大家：在你的模板，替換：

{% bootstrap_javascript %}

通過：

{% bootstrap_javascript jquery=1 %}

來源

2017-09-09 15:06:49

使用django-bootstrap3創建導航欄切換困難

回答

相關問題