Django Admin页面显示异常，缩小窗口恢复问题求助

进入admin.py中配置的Actualité页面时，界面显示错乱，但将浏览器窗口缩小后页面显示恢复正常。

我的admin.py代码 #

from django.contrib import admin
from .models import Actualité

# Register your models here.
class ActualitéAdmin(admin.ModelAdmin):
    list_display= ('id','titre','contenu','date_de_publication')

admin.site.register(Actualité, ActualitéAdmin)

页面异常情况 #

页面布局错乱，缩小浏览器窗口后恢复正常。

控制台日志信息 #

[08/Sep/2022 11:16:25] "GET /favicon.ico HTTP/1.1" 404 3701
[08/Sep/2022 11:16:36] "POST /admin/login/?next=/admin/ HTTP/1.1" 302 0
[08/Sep/2022 11:16:36] "GET /admin/ HTTP/1.1" 200 11383
[08/Sep/2022 11:16:36] "GET /static/admin/css/dashboard.css HTTP/1.1" 200 439
[08/Sep/2022 11:16:36] "GET /static/css/admin.css HTTP/1.1" 404 1798
[08/Sep/2022 11:16:37] "GET /static/admin/img/icon-addlink.svg HTTP/1.1" 200 334
[08/Sep/2022 11:16:37] "GET /static/admin/img/icon-changelink.svg HTTP/1.1" 200 383
[08/Sep/2022 11:16:37] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1" 200 82564
[08/Sep/2022 11:16:39] "GET /admin/Actualit%C3%A9/actualit%C3%A9/ HTTP/1.1" 200 11697
[08/Sep/2022 11:16:39] "GET /admin/jsi18n/ HTTP/1.1" 200 7953
[08/Sep/2022 11:16:39] "GET /static/css/admin.css HTTP/1.1" 404 1798
[08/Sep/2022 11:16:39] "GET /static/admin/js/jquery.init.js HTTP/1.1" 200 371

解决方案 #

从控制台日志能看到，系统反复请求/static/css/admin.css但返回404错误，这就是页面布局错乱的核心原因：Django Admin的样式文件加载失败，导致桌面端布局失效；而窗口缩小后触发了移动端适配样式，所以显示恢复正常。

按以下步骤修复：

1. 检查静态文件配置：
   • 打开settings.py，确认STATIC_URL = '/static/'配置正确
   • 生产环境下，添加STATIC_ROOT配置：

     STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
     

   • 开发环境下，确保INSTALLED_APPS包含django.contrib.staticfiles，且DEBUG = True
2. 收集静态文件（生产环境）：
   执行命令收集Django自带的静态资源到STATIC_ROOT目录：

   python manage.py collectstatic
   

3. 处理自定义样式文件：
   • 如果不需要自定义admin.css，检查项目模板中是否有引用该文件的代码，将其删除
   • 如果需要自定义，确保该文件存在于/static/css/目录下
4. 清理浏览器缓存：
   按下Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重新加载

内容的提问来源于stack exchange，提问作者Rabeto Mac Manfred Hardy