Django-Select2 Bootstrap5主题无法生效问题求助

以下是针对Select2功能正常但Bootstrap5主题样式失效问题的具体修复步骤：

1. 统一Select2的CSS和JS版本 #

当前引入的Select2 CSS版本为4.1.0-rc.0，但JS版本是4.1.0-beta.1，版本不匹配会导致样式解析异常。修改base.html中的资源链接，将两者统一为稳定版本：

<!-- 替换原Select2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"/>
<!-- 替换原Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

2. 在Django-Select2 Widget中直接指定主题 #

你使用的SchoolSelect2Widget会自动初始化Select2，可能覆盖自定义的初始化脚本。直接在widget配置中添加主题参数，无需额外的初始化代码：
修改forms.py中的widget定义：

school = forms.ModelChoiceField(
    queryset=School.objects.all(),
    widget=SchoolSelect2Widget(
        attrs={'class': 'form-select', 'data-placeholder': 'Select a school'},
        # 添加Select2配置，指定主题
        options={'theme': 'bootstrap-5'}
    ),
    required=True
)

之后可以删除select2_init.js，或注释掉其中的初始化代码，避免重复初始化冲突。

3. 移除form-floating容器对Select2的包裹 #

Bootstrap的form-floating组件是为原生表单控件设计的，与Select2的DOM结构不兼容，会导致样式错位。修改register.html中的字段容器：

<!-- 修改前 -->
<div class="d-flex justify-content-between mb-3">
    <div class="flex-fill form-floating">
        {{ form.school }}
        {% if form.school.errors %}
            {% for error in form.school.errors %}
                <div class="text-danger-emphasis">{{ error }}</div>
            {% endfor %}
        {% endif %}
    </div>
</div>

<!-- 修改后 -->
<div class="mb-3">
    {{ form.school.label_tag }} <!-- 手动添加标签，适配非浮动布局 -->
    {{ form.school }}
    {% if form.school.errors %}
        {% for error in form.school.errors %}
            <div class="text-danger-emphasis">{{ error }}</div>
        {% endfor %}
    {% endif %}
</div>

4. 调整样式加载顺序 #

确保form.media.css在基础CSS之后加载，避免被覆盖。若有自定义样式，需放在最后加载：

{% block css %}
    {{ block.super }}
    {{ form.media.css }}
    <!-- 自定义样式放在最后，避免覆盖主题样式 -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}" type="text/css">
{% endblock %}

5. 检查深色模式适配 #

页面启用了data-bs-theme="dark"，当前使用的select2-bootstrap-5-theme@1.3.0已支持深色模式，但需确保自定义样式未覆盖主题的深色模式类。

完成以上修改后，刷新页面即可看到Select2组件应用Bootstrap5主题样式。

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