Как сделать форму входа в систему на Django с помощью boostrap

Я пишу систему управления библиотеками на Django для своих личных нужд. У меня есть опыт работы с бэкендом, но не хватает опыта работы с фронтендом. В проекте используется Boostrap 4 и crispy forms от Django.

У меня есть базовый шаблон templates/base.html, от которого наследуют другие дочерние шаблоны.

На данный момент я хочу разместить форму входа в систему в центре страницы. Форма входа находится внутри templates/registration/login.html.

{% extends 'base.html' %}   

{% load crispy_forms_tags %}

{% block content %}
<div class="row justify-content-center align-items-center h-100">
  <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
     <form method="post"> {% csrf_token %}
        {{form | crispy }}
        <input type="submit" value="Login">
     </form>
    </div>
</div>
{% endblock %}

Ниже показано, как выглядит форма входа в систему.

enter image description here

Я хочу, чтобы он находился в центре экрана. Буду благодарен за любую помощь и совет. Я новичок во фронтенде.

Форма уже отцентрирована по горизонтали, поэтому я предполагаю, что вы хотите отцентрировать ее по вертикали. Проблема в том, что для вертикального центрирования необходимо знать высоту родителя, содержащего <div>, в котором находится форма. В вашем случае, я полагаю, это будет высота окна браузера, но это зависит от размера экрана пользователя.

Можно попробовать обернуть все в <div> и задать высоту в px ( Примечание Я часто окрашиваю фон HTML-элементов, чтобы помочь себе во время отладки, поэтому я добавил его и сюда):

{% block content %}
<div id="form-container" class="container" style="background-color:lightpink; width: 800px; height:100px;">
    <div class="row justify-content-center align-items-center h-100">
        <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <form method="post"> {% csrf_token %}
                {{form | crispy }}
                <input type="submit" value="Login">
            </form>
        </div>
    </div>
</div>
{% endblock %}

Но вышеописанное отцентрирует форму в 100px <div>, не на окне! Вы можете использовать JavaScript для получения размера окна (https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight), а затем с помощью JavaScript добавить высоту к элементу (https://stackoverflow.com/a/5192938/10951070).

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