Bootstrap 按钮在 django 表单中显示不正确

Question

编辑：刚刚意识到这个问题有多么臃肿，我的 html 格式多么糟糕。对不起，我在发帖前没注意到。现在正在修复它

因此，正如您可能在图像中看到的那样，我无法让 bootstrap 按钮正确显示在我的 Django 模板中。它旨在提交用户注册表，但如您所见，我已尝试将其放在几个地方以查看容器是否影响它：Bootstrap buttons as they appear in my project 当然，它应该是这样的： enter image description here 这是相关模板，按钮在几个地方重复：

<!-- my base template -->
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <title>Short Thoughts Posted Publicly Online</title>
</head>

<body>

<!-- I've got a navbar here, but I can't imagine that's relevant -->

    <div class="container">
        <div class="columns">


        {% block content %}


        {% endblock content %}
            </div>
    </div>
<script src="{% static 'js/bootstrap.bundle.js' %}"></script>

</body>

</html>


<!-- my registration template -->

{% extends 'base.html' %}

{% block content %}
<button type="button" class="btn btn-default">Register</button>
<div class="row">
                    <div class="shadow-none p-3 mb-5 bg-white rounded">
                    <form method="post">
                        {% csrf_token %}
                        {{form}}


                    </form>
                        <button type="button" class="btn btn-default">Register
                        </button>
                    </div>
    <button type="button" class="btn btn-default">Register
                        </button>



</div>
<button type="button" class="btn btn-default">Register
                        </button>


{% endblock %}

娱乐一下，下面是我的views.py中的相关方法：

def register(request):
if request.method == "GET":
    form = CustomUserCreationForm(request.GET)
    return render(
        request,
        "users/register.html",
        {"form": form}
    )
elif request.method == "POST":
    form = CustomUserCreationForm(request.POST)
    if form.is_valid():
        user = form.save()
        login(request, user)
        return redirect('dwitter:dashboard')
    else:
        return render(
            request,
            "users/register.html",
            {"form": form}
        )

aaa 和我的自定义表单 class

class CustomUserCreationForm(UserCreationForm):
username = forms.CharField(label='',min_length=5, max_length=150, widget=forms.TextInput(attrs={
    "class": "form-control",
    "placeholder": "Username",
    "required": "False"
}))
email = forms.EmailField(label='',widget=forms.TextInput(attrs={
    "class": "form-control",
    "placeholder": "Email",
    "required": False
}))
password1 = forms.CharField(label='', widget=forms.PasswordInput(attrs={
    "class": "form-control",
    "placeholder": "Password",

}))
password2 = forms.CharField(label='', widget=forms.PasswordInput(attrs={
    "class": "form-control",
    "placeholder": "Confirm Password",
    
}))

def username_clean(self):
    username = self.cleaned_data['username'].lower()
    new = User.objects.filter(username=username)
    if new.count():
        raise ValidationError("User Already Exist")
    return username

def email_clean(self):
    email = self.cleaned_data['email'].lower()
    new = User.objects.filter(email=email)
    if new.count():
        raise ValidationError(" Email Already Exist")
    return email

def clean_password2(self):
    password1 = self.cleaned_data['password1']
    password2 = self.cleaned_data['password2']

    if password1 and password2 and password1 != password2:
        raise ValidationError("Password don't match")
    return password2

def save(self, commit=True):
    user = User.objects.create_user(
        self.cleaned_data['username'],
        self.cleaned_data['email'],
        self.cleaned_data['password1']
    )
    return user

顺便说一下，我也很难摆脱那些“这个字段是必需的标签”，但我不能正确地说我已经对这个问题进行了尽职调查

Answer 1

Bootstrap buttons 的正确 class 是主按钮的 btn btn-primary。没有btn-default.

要避免“此字段是必填标签”，请执行 classic Post/Redirect/Get。所以，

def register(request):

    form = CustomUserCreationForm(request.POST or None)

    if form.is_valid():
        user = form.save()
        login(request, user)
        return redirect('dwitter:dashboard')

    return render(request, "users/register.html", {"form": form})

想法是如果请求是 POST，那么 request.POST 将有数据，因此它将是 True，您可以检查表单有效性。如果请求是 GET，那么 request.POST 将没有数据，因此它将是 False，因此 None 部分将接管，为您提供一个未绑定的空表单。因此，最后一个 return 将具有一个空的、未绑定的表单，因此不会有任何错误。如果表单有效，将进行重定向。

Bootstrap 按钮在 django 表单中显示不正确

Bootstrap button doesn't display properly in django form

django

bootstrap-5