如何为django-filter的RangeFilter添加Bootstrap样式类？添加后为何变单输入框？

• 问题原因：RangeFilter默认使用RangeWidget控件，该控件包含两个文本输入框（对应价格的最小值和最大值）。你直接将widget设置为forms.TextInput，相当于把原本的双输入控件替换成了单输入文本框，所以出现了单个文本框的异常情况。

• 正确实现方式：需要给RangeWidget内部的每个输入框添加form-control类，而非替换整个控件。修改后的代码如下：

import django_filters
from panel.models import Product, Category, Size, TopNote, BaseNote, MidNote
from django import forms

class ProductFilter(django_filters.FilterSet):
    price = django_filters.RangeFilter(
        widget=django_filters.widgets.RangeWidget(
            attrs={'class': 'form-control'}
        )
    )
    
    class Meta:
        model = Product
        fields = ['name', 'category_id', 'price', 'top_notes', 'base_notes', 'size']

RangeWidget会自动将传入的attrs属性应用到它包含的两个输入框上，这样既保留了范围过滤器的双输入框结构，又能让每个输入框拥有Bootstrap的form-control样式。

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