为什么在 Django 表单中添加 \'form-control\' 引导程序类不起作用？答案

【问题标题】：Why is adding 'form-control' bootstrap class in Django form not working?为什么在 Django 表单中添加 \'form-control\' 引导程序类不起作用？
【发布时间】：2022-12-15 19:29:45
【问题描述】：

我正在创建一个没有内置模型表单的登录页面。我正在使用 Django 的 FormAPI 并按照所有步骤将类属性添加到我的表单的输入字段。但它看起来仍然像一个没有引导程序的基本形式。

表格.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'}))

需要继承的基础模板文件：

<!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 %}

我哪里错了？当我在浏览器上查看源代码页面时，类属性根本没有显示！

【问题讨论】：

你的 views.py 怎么样：你实例化 LoginForm() 好吗？在上下文中通过之前它是否有可能发生变化？

标签： django django-forms django-templates bootstrap-5

【解决方案1】：

请与{% extends 'forms_base.html' %}联系

【讨论】：