Django ModelForm配置Bootstrap4 widgets时TimePicker/表单样式异常

问题原因 #

• 核心问题是as_crispy_field模板过滤器破坏了Bootstrap input-group的嵌套结构：Bootstrap要求input-group容器下直接放置input-group-text标签和带form-control类的输入元素，而as_crispy_field默认会在输入框外层包裹一层form-group类的div，额外的嵌套层级导致样式不生效。
• 你已经在Form类中把字段label设为空，但crispy表单仍会自动生成错误提示占位、辅助文本容器等额外DOM结构，进一步打乱input-group的布局规则。
• 未配置time_end、day两个字段的widget属性，后续如果用表单渲染这两个字段也会缺失form-control类，导致样式异常。

解决方法 #

直接去掉模板中的as_crispy_field过滤器即可，你已经在widget中给输入框配置了正确的form-control类，直接渲染字段本身就能输出符合要求的DOM结构：

<!-- 修改前 -->
{{schedule_item_form.name|as_crispy_field}}
<!-- 修改后 -->
{{schedule_item_form.name}}

如果需要保留crispy表单的错误提示等能力，可以在Form类中通过crispy的Layout配置来定义input-group结构，不需要手动在模板中写外层容器。

另外注意硬编码的两个输入框要和表单字段名对齐：end_time输入框的name属性要改为time_end和表单字段对应，day下拉框也建议用表单渲染，避免选项和模型定义不同步的问题。

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