Django项目中CSS无法加载问题求助

架构老林

2026-6-30

Django项目Bootstrap样式加载失败解决指南

项目基本信息

包含home、header、footer、about_us四个应用
关键模板路径：
- home应用模板：project_folder/home/templates/home/base_home.html
- header应用模板：project_folder/header/templates/header/base_header.html

现有模板代码

base_home.html

{% extends 'header/base_header.html' %}

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    </head>
    <body>
        <header>
            {% block content %}
            {% endblock %}
        </header>
    </body>
</html>

base_header.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<form class="form-inline my-2 my-lg-0">
  <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>
</div> <!-- 原代码缺失该闭合标签，导致HTML结构错乱 -->

settings.py核心配置

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

DEBUG = True
ALLOWED_HOSTS = []

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',
    'header',
    'footer',
    'about_us'
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'home', 'static'),
    os.path.join(BASE_DIR, 'header', 'static'),
    os.path.join(BASE_DIR, 'footer', 'static')
]

当前问题

页面仅显示导航栏原始HTML结构，Bootstrap CSS样式完全未生效，无任何排版样式。

解决步骤

1. 修复模板继承逻辑

Django模板的{% extends %}标签必须放在文件第一行，且继承后无需重复编写完整的html/head/body结构（否则会破坏继承逻辑，导致CSS无法正确加载）。

修改后的base_home.html：

{% extends 'header/base_header.html' %}

{% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
{% endblock %}

{% block content %}
    <!-- 页面内容区域 -->
{% endblock %}

{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
{% endblock %}

同时调整base_header.html，添加对应block让子模板填充内容：

<!doctype html>
<html lang="en">
<head>
    {% block head %}{% endblock %}
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0"> <!-- Bootstrap5替换mr-auto为me-auto -->
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="d-flex" role="search"> <!-- Bootstrap5替换form-inline为d-flex -->
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </nav>

    {% block content %}{% endblock %}

    {% block scripts %}{% endblock %}
</body>
</html>

2. 修正Bootstrap版本兼容问题

加载的是Bootstrap5 CSS，但使用了Bootstrap4的属性，需统一为Bootstrap5规范：

data-toggle → data-bs-toggle
mr-auto → me-auto
form-inline → d-flex
导航项active类配合aria-current="page"属性

3. 补全HTML结构

原base_header.html缺失</div>标签闭合折叠容器，导致浏览器无法正确解析样式，需补充该标签。

4. 验证静态文件配置（可选）

当前静态文件配置无问题，若后续使用本地静态资源，需：

确保应用static目录结构正确（如header/static/header/css/xxx.css）

在模板中用{% load static %}加载本地资源：

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

验证修复

修改完成后重启Django开发服务器，刷新页面即可看到Bootstrap样式正常加载，导航栏排版和交互功能恢复正常。

内容的提问来源于stack exchange，提问作者Dragos

Django项目中CSS无法加载问题求助

项目基本信息 #

现有模板代码 #

base_home.html #

base_header.html #

settings.py核心配置 #

当前问题 #

解决步骤 #

1. 修复模板继承逻辑 #

2. 修正Bootstrap版本兼容问题 #

3. 补全HTML结构 #

4. 验证静态文件配置（可选） #

验证修复 #