Django-Select2搭配Crispy Forms多选框样式异常排查求助

我正在用Django-Select2搭配Crispy Forms构建表单，需要两个多选选框（pillbox样式），但当前显示效果不符合预期。已经完成所有必要安装和路径配置，相关代码如下：

forms.py 代码 #

class CreateModuleForm(forms.ModelForm):
    module_lead = forms.ModelChoiceField(
        queryset=CustomUser.objects.filter(role_fk__name='professor'),
        label="Module Lead",
        widget=Select2Widget(attrs={'data-placeholder': 'Select Module Lead', 'class': 'form-control'})
    )
    professors = forms.ModelMultipleChoiceField(
        queryset=CustomUser.objects.filter(role_fk__name='professor'),
        required=False,
        widget=Select2MultipleWidget(attrs={'data-placeholder': 'Select Professors', 'class': 'form-control', 'data-maximum-selection-length': 10})
    )
    courses = forms.ModelMultipleChoiceField(
        queryset=Course.objects.all(),
        required=False,
        widget=Select2MultipleWidget(attrs={'data-placeholder': 'Select Courses', 'class': 'form-control', 'data-maximum-selection-length': 10})
    )
    
    class Meta:
        model = Module
        fields = ['code', 'name', 'credit', 'start_date', 'end_date', 'enrollment_limit', 'description']
        widgets = {
            'code': forms.TextInput(attrs={'class': 'form-control'}),
            'name': forms.TextInput(attrs={'class': 'form-control'}),
            'credit': forms.NumberInput(attrs={'class': 'form-control'}),
            'start_date': forms.DateInput(format=('%Y-%m-%d'), attrs={'class': 'form-control', 'type': 'date'}),
            'end_date': forms.DateInput(format=('%Y-%m-%d'), attrs={'class': 'form-control', 'type': 'date'}),
            'enrollment_limit': forms.NumberInput(attrs={'class': 'form-control'}),
            'description': forms.Textarea(attrs={'class': 'form-control'}),
        }
    
    def __init__(self, *args, **kwargs):
        super(CreateModuleForm, self).__init__(*args, **kwargs)
        self.fields['module_lead'].empty_label = None

template.html 代码 #

{% extends "admin_lms/base.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block extrahead %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="container">
    <h2>Create Module</h2>
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button type="submit" class="btn btn-success">Create</button>
        <a href="{% url 'index' %}" class="btn btn-secondary">Back</a>
    </form>
</div>
{% endblock %}

{% block extrajs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
{{ form.media.js }}
<script>
    $(document).ready(function() {
        $('#id_professors').select2();
        $('#id_courses').select2();
    });
</script>
{% endblock %}

显示效果对比 #

当前显示效果 #

预期显示效果 #

可能的错误原因 #

• 重复加载/初始化冲突：同时引入了外部Select2资源和{{ form.media }}，并且手动调用了select2()初始化。Django-Select2的form.media已经包含了必要的CSS和JS，重复加载会导致样式和脚本冲突，建议移除外部的Select2 CSS/JS引用以及手动初始化代码，只保留{{ form.media.css }}和{{ form.media.js }}。

• Bootstrap版本不兼容：如果项目使用Bootstrap 5，你当前用的Select2 4.0.13默认适配Bootstrap 4，pillbox样式会失效。需要引入适配Bootstrap 5的Select2主题样式，替换原有的Select2 CSS：

  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
  

• form-control类冲突：给Select2控件添加了Bootstrap的form-control类，该类的样式会覆盖Select2的pillbox样式。建议移除widget attrs中的class: 'form-control'，或者调整样式优先级。

• Crispy Forms容器样式干扰：Crispy Forms生成的表单容器可能给Select2元素添加了额外的padding、margin或布局类，导致样式变形。可以尝试使用Crispy Forms的{% crispy form %}标签替代{{ form|crispy }}，或者自定义Crispy的布局模板，避免容器样式影响Select2控件。

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