2017-12-15 1 views
0

Ich versuche, Twitter-Bootstrap zu einem Django-Projekt hinzuzufügen. Ich habe eine HTML-Datei namens base.html, die als eine Wrapper-Datei für andere HTML-Code fungiert, die in es platziert wird, bevor es zurück in die HttpResponse gesendet wird.bootstrap navbar dropdowns zeigt nicht mit django

base.html

{% load static %} 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="{% static '/css/bootstrap.min.css' %}" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src = "{% static '/js/bootstrap.min.js' %}"></script> 
    <title>TITLE</title> 
</head> 
<body> 
    {% autoescape off %}{{ content }}{% endautoescape %} 
</body> 
</html> 

Diese Datei ist die einzige Datei, die jemals wieder auf den Besucher der Webside senden lassen, so würde ich mir vorstellen, dass, wenn ich hinzufügen, die Dateien Bedürfnisse innerhalb base.html Bootstrap, dass es würde auch auf den Code im Inhalt arbeiten. Eigentlich scheint alles CSS-Zeug gut zu funktionieren, aber wenn ich versuche, ein Dropdown-Menü in der Navigationsleiste meiner Website zu öffnen, wird es nicht angezeigt.

Dies ist der Quellcode der Seite, die Schwierigkeiten hat:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="/static/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src = "/static/js/bootstrap.min.js"></script> 
    <title>TITLE</title> 
</head> 
<body> 
    <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="?p=index">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="?p=channel">testchannel</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    <form class="form-inline"> 
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Username 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
      <a class="dropdown-item" href="?p=Channel">Visit Channel</a> 
      <a class="dropdown-item disabled" href="#">Statistics</a> 
      <div class="dropdown-divider"></div> 
      <a class="dropdown-item disabled" href="#">Settings</a> 
     </div> 
     </li> 
     </ul> 
    </div> 
</nav> 
    <h1>A TEST HEADER</h1> 

</body> 
</html> 

Klick auf den "/static/css/bootstrap.min.css" oder "/static/js/bootstrap.min.js" beide leitet mich in eine Datei (kein Fehler 404 erscheint).

Was könnte das Problem sein, dass die Navbar nicht funktioniert? Wie kann ich es reparieren?

EDIT:

Wie informieren Sie die settings.py Teil, der statische Griffe:

# Build paths inside the project like this: os.path.join(BASE_DIR, ...) 
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 

# some more stuff here like INSTALLED_APPS and TEMPLATES 

STATICFILES_DIRS = (
    '/home/<name>/Desktop/django/myproject/Bootstrap', 
) 

STATIC_URL = '/static/' 

Antwort

0

Bitte stellen Sie sicher, dass Sie den richtigen statischen Pfad in der settings.py Datei enthalten ist.

Ich habe etwas wie das Folgende in einem meiner Projekte verwendet und es funktioniert gut.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 
STATIC_URL = '/static/' 

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"), 
) 
+0

ahh Ich werde diesen Teil von settings.py zu meiner ursprünglichen Frage hinzufügen, so dass Sie überprüfen können – BRHSM

Verwandte Themen