本地django项目，Bootstrap排版显示效果混乱，CSS样式不起作用原因分析及解决方案

原因分析：Bootstrap只要正常引用了样式文件（可通过点击样式连接查看是否能打开），或者本地文件引用的情况下，要注意样式引用的地址是否正确，在django中常见原因是地址引用错误。

如下html的引用：

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!-- Fontastic Custom icon font-->
<link rel="stylesheet" href="../../static/css/fontastic.css">
<!-- Google fonts - Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<!-- jQuery Circle-->
<link rel="stylesheet" href="../../static/css/grasp_mobile_progress_circle-1.0.0.min.css">
<!-- Custom Scrollbar-->
<link rel="stylesheet" href="../../static/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="../../static/css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="../../static/css/custom.css">
<!-- Favicon-->
<link rel="shortcut icon" href="../../static/img/favicon.ico">

解决方案：

在html头部导入static文件路径：{% load static %}

将所有的相对路径用django的static路径拼接：...href="../../static/....xxx">改成...href={% static "....xxx" %}>

如：<link rel="stylesheet" href="../../static/css/fontastic.css">

改为：<link rel="stylesheet" href={% static "css/fontastic.css" %}>

注意：static在setting中要正确设置，一般为STATIC_URL = 'static/'，代表会查找所有名称为static的文件夹下的静态文件。

本例所使用的目录结构：

├─static
│  ├─css
│  ├─data
│  ├─fonts
│  ├─icons-reference
│  │  └─fonts
│  ├─img
│  │  ├─brand
│  │  └─flags
│  │      └─16
│  ├─js
│  └─vendor
│      ├─chart.js
│      ├─jquery-validation
│      ├─jquery.cookie
│      ├─malihu-custom-scrollbar-plugin
│      └─popper.js
│          ├─esm
│          ├─esm
└─jquery3.6.0.js

标签：文件,样式,Bootstrap,js,static,引用,django,CSS
来源： https://www.cnblogs.com/aiyablog/p/16690399.html