2017-11-12 2 views
-2

* bearbeiten Ich denke, der Code ist korrekt, vielleicht hat es etwas mit Chrome zu tun?Bootstrap CSS arbeitet nicht mit Flask

* edit 2 enthalten die Dateistruktur enter image description here

ich versucht habe, eine Bootstrap-Pille auf meiner Seite hinzugefügt, aber die CSS scheint nicht zu funktionieren. Ich habe versucht, andere Komponenten hinzuzufügen, aber das CSS scheint auch nicht für sie zu arbeiten.

Ich habe auch versucht "cmd shift r" (ich benutze einen Mac), aber das hat auch nicht geholfen.

Wer weiß, warum das nicht funktioniert und wie es zu beheben?

Ich habe heruntergeladen und in den statischen Ordner der Bootstrap-Dist.

What the page looks like

The python code

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Home Page</title> 
    <meta name="viewport" content="width=device-width, initial scale=1"> 
    <link type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" 
    rel="stylesheet"> 
    <!-- how to link an icon 
    <link rel="shortcut icon" 
    href="{{ url_for('static', filename='icon_name.ico') }}"> 
    --> 
</head> 
<header> 
    <ul class="nav nav-pills" role="tablist"> 
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> 
    </ul> 
</header> 
</html> 
+0

in welchem ​​Verzeichnis haben Sie bootstrap.min.js? – fins

+2

Ich kann Ihr Problem nicht reproduzieren. Die Verknüpfung mit dem Bootstrap-CSS im statischen Ordner funktioniert wie erwartet. Bitte [bearbeiten], um ein [mcve] einzuschließen. – davidism

+0

bootstrap.min.js ist in static/js –

Antwort

0

je unterschiedliche Ergebnisse den HTML-Code aus Ihrer Frage Ausbeuten Verwendung von der Version von Bootstrap Sie Referenz. Es ist möglich, dass Sie Bootstrap 4 verwenden, wenn Sie Bootstrap 3 verwenden müssen. Dies würde dazu führen, dass die Nav-Pillen wie das Bild in Ihrer Frage angezeigt werden.

HTML (von Frage)

<header> 
    <ul class="nav nav-pills" role="tablist"> 
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> 
    </ul> 
</header> 

Linking bootstrap 3

enter image description here

bootstrap Linking

+0

Vielen Dank. Perfekt funktioniert jetzt! –

Verwandte Themen