Django中Bootstrap下拉按钮渲染异常问题排查

你的下拉按钮显示原生HTML样式，核心原因是没有在页面中正确引入Bootstrap的CSS样式文件和JavaScript交互脚本——Bootstrap组件的样式渲染、下拉交互逻辑都依赖这些资源，未加载的话只会显示元素的原生形态。

解决步骤 #

1. 在模板中添加Bootstrap资源引用 #

在你的index.html里，按以下位置插入资源引用：

• 在<head>标签内引入Bootstrap CSS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

• 在</body>闭合标签前，引入下拉组件依赖的Popper.js和Bootstrap JS：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

2. 完整模板示例 #

把你的下拉代码嵌入标准HTML结构中，完整index.html示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉按钮测试</title>
    <!-- 引入Bootstrap样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 你的下拉按钮代码 -->
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown button
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>

    <!-- 引入Bootstrap交互脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

3. 本地静态资源配置（可选） #

如果不想用CDN，打算将Bootstrap文件放在项目本地：

• 在create_user应用下创建static/bootstrap文件夹，放入Bootstrap的CSS、JS及Popper文件
• 在模板顶部加载静态文件标签：{% load static %}
• 将资源引用替换为本地路径，例如：

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

同时确保项目settings.py中已配置静态文件路径：

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

完成以上操作后，就能正常渲染出Bootstrap的下拉按钮样式与交互效果。

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