Расположение элементов Django-формы с помощью Bootstrap 5 с помощью встроенной сетки (Grid System) и флексбоксами (Flexbox)

Вариант 1. Элементы в одну строку (через Grid)

Чтобы выстроить поля и кнопку в один ряд, оберните их в родительский контейнер с классом row и используйте класс col для каждого элемента.

 

<form class="row g-3 align-items-center" method="post" action="{% url 'finances:add-income' %}">
    {% csrf_token %}
    <div class="col-auto">
        <div class="form-floating">
            {{ form.amount|add_class:"form-control" }}
            <label for="{{ form.amount.id_for_label }}">Сумма</label>
        </div>
    </div>
    <div class="col-auto">
        <div class="form-floating">
            {{ form.date_bank|add_class:"form-control" }}
            <label for="{{ form.date_bank.id_for_label }}">Дата</label>
        </div>
    </div>
    <div class="col-auto">
        <button class="btn btn-primary h-100" type="submit">Отправить</button>
    </div>
</form>

 

Вариант 2. Один над другим с ограниченной шириной

Чтобы расположить элементы вертикально и ограничить их ширину (например, не более 10 символов), лучше всего использовать Inline-стили (max-width: 10ch) или стандартную сетку. Символьная единица измерения ch в CSS идеально подходит для ограничения ширины по количеству знаков.

 

<form class="d-flex flex-column gap-3" method="post" action="{% url 'finances:add-income' %}">
    {% csrf_token %}
    
    <!-- Контейнер с ограничением ширины в 10 символов -->
    <div style="max-width: 10ch;">
        <div class="form-floating">
            {{ form.amount|add_class:"form-control" }}
            <label for="{{ form.amount.id_for_label }}">Сумма</label>
        </div>
    </div>

    <div style="max-width: 10ch;">
        <div class="form-floating">
            {{ form.date_bank|add_class:"form-control" }}
            <label for="{{ form.date_bank.id_for_label }}">Дата</label>
        </div>
    </div>

    <div style="max-width: 10ch;">
        <input class="btn btn-primary w-100" type="submit" value="Отправить">
    </div>
</form>

 

Способ 3. Фиксированная высота (Самый надежный для form-floating)

Так как кнопка и поле даты выбиваются из высоты плавающего инпута, принудительно задайте им класс h-100 (высота 100%), а сами колонки col-auto сделайте одинаковыми по высоте с помощью align-items-stretch в строке:

<form class="row g-3 align-items-stretch" method="post" action="{% url 'finances:add-income' %}">
    {% csrf_token %}
    <div class="col-auto">
        <div class="form-floating">
            {{ form.amount|add_class:"form-control" }}
            <label for="{{ form.amount.id_for_label }}">Сумма</label>
        </div>
    </div>
    <div class="col-auto">
        <div class="form-floating h-100">
            {{ form.date_bank|add_class:"form-control h-100" }}
            <label for="{{ form.date_bank.id_for_label }}">Дата</label>
        </div>
    </div>
    <div class="col-auto d-flex align-items-stretch">
        <button class="btn btn-primary px-4" type="submit">Отправить</button>
    </div>
</form>

 

Способ 4. Отказ от form-floating в пользу классического стиля

Плавающие лейблы (form-floating) часто конфликтуют с нативными календарями (type="date"). Если сделать форму классической, используя стандартные компактные инпуты Bootstrap, все элементы автоматически станут одной базовой высоты:

 

<form class="row g-2 align-items-center" method="post" action="{% url 'finances:add-income' %}">
    {% csrf_token %}
    <div class="col-auto">
        <!-- Вместо плавающего лейбла используем placeholder или обычный label сверху -->
        {{ form.amount|add_class:"form-control" }}
    </div>
    <div class="col-auto">
        {{ form.date_bank|add_class:"form-control" }}
    </div>
    <div class="col-auto">
        <button class="btn btn-primary" type="submit">Отправить</button>
    </div>
</form>

 

 

from django import forms

class ReceiptForm(forms.Form):
    amount = forms.DecimalField(
        label="Сумма", 
        initial=110050
    )
    
    date_bank = forms.DateField(
        label="Дата",
        widget=forms.DateInput(
            attrs={
                'type': 'date',  # Включает встроенный календарь браузера
                'class': 'form-control',
            }
        )
    )

 

 

Шаг 2. Верстаем форму в шаблоне HTML

Так как мы убрали form-floating, для идеального выравнивания по центру строки используйте класс align-items-center на контейнере row.

<form class="row g-2 align-items-center" method="post" action="{% url 'finances:add-income' %}">
    {% csrf_token %}
    
    <!-- Колонка для суммы -->
    <div class="col-auto">
        {{ form.amount|add_class:"form-control" }}
    </div>
    
    <!-- Колонка для даты -->
    <div class="col-auto">
        {{ form.date_bank }}
    </div>
    
    <!-- Колонка для кнопки -->
    <div class="col-auto">
        <button class="btn btn-primary" type="submit">Отправить</button>
    </div>
</form>

 

Что изменится:

<style>
    /* Для Chrome, Safari, Edge и Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Для Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>

 

Как это работает:

<li>
    <form method="post" action="{% url 'finances:debug-clear' %}" class="d-inline">
        {% csrf_token %}
        <button type="submit" class="btn btn-link nav-link p-0 border-0 align-baseline">Инициализировать</button>
    </form>
</li>
<li>
    <a href="{% url 'finances:debug-state' %}" class="nav-link">&lt;Все таблицы&gt;</a>
</li>

Что здесь изменилось: