在Django表单中添加Bootstrap的form-control类无效，原因是什么？

我正在创建一个不使用内置ModelForm的登录页面，采用Django的FormAPI进行开发，已按步骤为表单输入字段添加class属性，但表单仍呈现基础样式，无Bootstrap效果。查看浏览器页面源码时，class属性完全未显示。相关代码如下：

forms.py #

#Login Form

class LoginForm(forms.Form):
    username=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
    password=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control'}))

基础模板文件（forms_base.html） #

<!doctype html>
{% load static %}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="{% static 'account/images/logo.ico' type='image/x-icon' %}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'account/css/style.css' %}">
    <title>{% block title %}{% endblock title %}</title>
  </head>
  <body class="forbody">
    <div class="container trp" style="margin-top: 2%; display: inline-block;">
        <div class="row">
            <div class="col-md-4">
                <img src="{% static 'account/images/Logo.png' %}" alt="Logo" style="height: 60%; width: auto;">
            </div>
        </div>
    </div>
    <div class="container" style="width: 40%; margin-top: 10%;">
        <div class="container" style="width: auto; margin-top: 8%;">
            <div class="container" style="background-color: #696969; height: auto; width: auto; margin-top: 8%;">
                <div class="row">
                    <div class="col-lg-6" style="padding-top: 25px; padding-bottom: 20px; padding-left: 20px;">
                        <form action="" method="post" novalidate>
                            {% csrf_token %}
                            {% block formcontent %} {% endblock formcontent %}
                <div class="row text-center">
                    <div class="col-lg-12">
                        {% block loginbtn %} {% endblock loginbtn %}
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-lg-12" style="padding-top: 10px; padding-bottom: 12px;">
                        {% block outerlink %} {% endblock outerlink %}
                        {% block messages %} {% endblock messages %}
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
  </body>
</html>

登录模板 #

{% extends 'account/forms_base.html' %}
{% block title %}Log-in{% endblock title %}
{% block formcontent %}
    {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
            {{error}}
        {% endfor %}
    {% endif %}
    {% for fm in form %}
        {{fm.label_tag}} {{fm}} {{fm.error|striptags}} <br><br>
    {% endfor %}
{% endblock formcontent %}
{% block loginbtn %}
    <input class="submitbtn" type="submit" value="Login">
{% endblock loginbtn %}
{% block outerlink %}
    <small style="margin-top: 5px;">To register <a href="{% url 'signup' %}" class="signuptag">Click Here</a></small>
{% endblock outerlink %}
{% block messages %}
    {% if messages %}
        {% for message in messages %}
            <span {% if message.tags %} class="{{message.tags}}" {% endif %}>{{message}}</span>
        {% endfor %}
    {% endif %}
{% endblock messages %}

请问我哪里出错了？

检查以下几个核心问题：

1. 视图是否正确传递表单实例
   确保视图函数中正确创建LoginForm实例，并以form为键传入模板上下文，示例代码：

   from django.shortcuts import render
   from .forms import LoginForm
   
   def login_view(request):
       form = LoginForm()
       return render(request, 'account/login.html', {'form': form})
   

   如果未传递form对象，模板中form变量为空，渲染出的字段自然不会带有定义的class属性。

2. 是否存在表单widget被覆盖的情况
   若视图或表单的__init__方法中重新设置了widget但未保留原有attrs，会丢失form-control类：

   • 错误示例：

     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.fields['username'].widget = forms.TextInput()  # 直接替换widget，丢失class
     

   • 正确做法：

     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.fields['username'].widget.attrs.update({'placeholder': 'Enter username'})  # 保留原有class
     

3. 缓存与服务器加载问题

   • 强制刷新浏览器缓存（Ctrl+F5），避免旧模板内容残留
   • 重启Django开发服务器，确保表单和模板的修改被正确加载

4. 模板渲染逻辑验证
   模板中{{fm}}的写法是正确的，但可以临时在模板中添加{{form}}直接渲染整个表单，测试是否能显示带class的字段，以此排除模板循环渲染的问题。

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