Кнопка Bootstrap не отображается должным образом в форме django

EDIT: Только что понял, насколько раздутым является этот вопрос и насколько плохо сформирован мой html. Извините, что не заметил этого перед публикацией. Сейчас работаю над исправлением

Итак, как вы, вероятно, можете видеть на изображениях, у меня проблемы с отображением кнопки bootstrap в моем шаблоне Django. Она предназначена для отправки формы регистрации пользователя, но, как вы видите, я попробовал разместить ее в нескольких местах, чтобы понять, влияет ли на нее контейнер:Кнопки bootstrap, как они выглядят в моем проекте и, конечно, это должно выглядеть так: введите описание изображения здесь. Вот соответствующий шаблон, в котором кнопка повторяется в нескольких местах:

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

а также класс моей пользовательской формы

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

По случайному совпадению, у меня также возникают проблемы с избавлением от этих таблиц "This field is required lables", но я пока не могу с уверенностью сказать, что сделал все возможное для решения этой проблемы

Правильным классом для Bootstrap buttons является btn btn-primary для первичной кнопки. Не существует btn-default.

Чтобы избежать появления "This field is required labels", сделайте классический 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 возьмет на себя ответственность, давая вам несвязанную, пустую форму. Таким образом, последний возврат будет иметь пустую, несвязанную форму, поэтому в нем не будет ошибок. Если форма действительна, то произойдет перенаправление.

Вернуться на верх