Django PhoneNumberField库搭配Bootstrap类后布局异常如何解决

方案1：模板中直接拆分子部件 #

PhoneNumberPrefixWidget属于Django的多部件Widget，两个子控件分别对应国际前缀选择框和本地号码输入框，在模板中可以通过{{ form.phone_no.0 }}和{{ form.phone_no.1 }}分别调用，配合Bootstrap的input-group类即可实现横向并排：

<div class="input-group w-100">
  {{ form.phone_no.0 }}
  {{ form.phone_no.1 }}
</div>

如果需要调整边框圆角适配Bootstrap样式，可以单独给两个控件追加类（需要先安装django-widget-tweaks库支持add_class过滤器）：

{% load widget_tweaks %}
<div class="input-group w-100">
  {{ form.phone_no.0|add_class:"form-control rounded-end-0 border-end-0" }}
  {{ form.phone_no.1|add_class:"form-control rounded-start-0" }}
</div>

方案2：Form层自定义子部件属性 #

也可以直接在forms.py中给两个子部件单独配置属性，模板直接正常调用即可：

from django import forms
from phonenumber_field.fields import PhoneNumberField
from phonenumber_field.widgets import PhoneNumberPrefixWidget

class YourForm(forms.Form):
    phone_no = PhoneNumberField(
        widget=PhoneNumberPrefixWidget(
            widgets=[
                forms.Select(attrs={'class': 'form-control rounded-end-0 border-end-0'}),
                forms.TextInput(attrs={'class': 'form-control rounded-start-0'}),
            ],
            attrs={'class': 'input-group w-100'}
        )
    )

模板中还是保持原有调用即可：

{{ form.phone_no }}

两种方案都不需要手动遍历子部件，Django默认支持多部件Widget的索引访问。

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