时间戳

首页 > 解决方案 > Bootstrap 仅适用于我网站的主页，但不适用于其他 html 页面。为什么？

html - Bootstrap 仅适用于我网站的主页，但不适用于其他 html 页面。为什么？

问题描述

我是一个新手，正在尝试使用 Django 创建一个电子商务网站。我正在使用 Bootstrap 5。Bootstrap 只能在我网站的主页上运行，而不能在其他页面上运行……这是为什么呢？

main.html

<!DOCTYPE html>
{% load static %}
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="static/css/main.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <style>
        /*PAYPAL BUTTONS STYLE*/
        /* Media query for mobile viewport */
        @media screen and (max-width: 400px) {
            #paypal-button-container {
                width: 100%;
            }
        }
                    
        /* Media query for desktop viewport */
        @media screen and (min-width: 400px) {
            #paypal-button-container {
                width: 250px;
            }
        }
        </style>


        <title>
            {% block title %}
            {% endblock title %}
        </title>

    </head>

    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="/">MONOÏ</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="/">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="/">La marque</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="{% url 'store:categories' %}">Catégories</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="/all_products/">Tous les produits</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="{% url 'contact:contact-form' %}">Contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="https://www.instagram.com/monoi.paris/" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="https://www.instagram.com/monoi.paris/" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="/basket/"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket" viewBox="0 0 16 16">
                                    <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9H2zM1 7v1h14V7H1zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5z"/>
                                </svg></a>
                            </li>
                            <li> 
                                {% with total_qty=basket|length %}
                                    <span class="cart-count" id="cart-count"> 
                                            {% if total_qty > 0 %}
                                                {{ total_qty }}
                                            {% else %}
                                                0
                                            {% endif %}
                                    </span>
                                {% endwith %}
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <section class="page-content" id="page-content">
            <div>
                {% if messages %}
                    <ul>
                        {% for message in messages %}
                            <li {% if message.tags %} class="{{ message.tags }}"{% endif %}>
                               {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}Important: {% endif %}
                               {{ message }}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>
            {% block content %}
            {% endblock content %}
        </section>

        <footer>
            <div id="copyright">
                <span>© AlexisWeb </span>
            </div>
        </footer>

        <script src="js/bootstrap.js"></script>

    </body>

</html>

主页.html

引导程序运行良好。导航栏完全按照应有的方式显示。

{% extends 'main.html' %}
{% load static %}

{% block title %}

Home page

{% endblock title %}


{% block content %}

    <h3>////////////</h3>
    <h3>Home page</h3>
    <h3>//////////////</h3>

{% endblock content %}

主页

类别.html

Bootstrap 不适用于“类别”页面或任何其他页面（主页除外）。

{% extends 'main.html' %}
{% load static %}

{% block title %}

Catégories

{% endblock title %}

{% block content %}

    <h3>////////////</h3>
    <h3>"Boutique" page</h3>
    <h3>Catégories de produits</h3>
    <h3>//////////////</h3>

    <div> 

    {% for c in categories %}

    <div> {{c.name | title }} </div>

    {% endfor %}

    </div>

{% endblock content %}

分类页面

文件夹树结构

文件夹树结构

标签： htmlcssdjangotwitter-bootstrapsass

解决方案

您在模板中引用了如下样式表：

<link href="static/css/main.css" rel="stylesheet">

这static/css/main.css是一个从当前页面而不是从root开始的相对 url 。如果 url 应该来自网站的根目录，则相对 url 应该有一个前导斜杠( /)，因此你应该这样写：

<link href="/static/css/main.css" rel="stylesheet">

更好的是，您应该简单地使用static模板标签 [Django docs]：

<link href="{% static 'css/main.css' %}" rel="stylesheet">

推荐阅读