Изменение макета формы django-фильтра

В настоящее время я работаю над своим первым большим проектом на django и сталкиваюсь с проблемами, связанными с расположением моих фильтров данных, сделанных с помощью django-filters. По умолчанию форма django-filter имеет вид вертикального списка (см. изображение), но мне нужно сделать ее горизонтальной, состоящей из двух рядов (меток/полей). enter image description here

Каким способом (наилучшей практикой) можно редактировать макет? Есть ли способ получить доступ к каждому Label/Field-Item формы из шаблона, чтобы я мог использовать Bootstrap5 Grid?

Одно ограничение - мой шаблон будет использоваться разными моделями/фильтрами, поэтому мне нужно динамически настраивать макет.

Каждая подсказка очень ценится :) Спасибо!

Мой шаблон (соответствующий раздел)

<form method="get" class="form">
       <button type="submit" class ="btn btn-primary">Filtern</button>
       {% crispy filter.form %}
</form>

мой класс фильтра django-filter

class EquipmentFilter(FilterSet):
    class Meta:
        model = Equipment
        fields = {'name': ['icontains'], 'description': ['icontains']}

моя модель

class Equipment(models.Model):
    """Device that can execute a measurement"""
    name = models.CharField("Name", max_length=50)
    description = models.CharField("Description", max_length=100)
    configuration = models.JSONField("Configuration", default=dict)
    equipment_category = models.ForeignKey("EquipmentCategory", on_delete=models.CASCADE, verbose_name="Equipment Category")

filter.form - это обычная форма Django, поэтому вы можете расположить ее так, как вам нужно.

Я вижу, что вы используете хрустящие формы. Но вы можете стилизовать его как угодно, включая boostrap-way.

Вот пример из официальной документации

Вы можете использовать метод .as_p для получения их в формате <p><label><input></label></p> или сгенерировать их вручную:

<form method="get" class="form">
  <button type="submit" class ="btn btn-primary">Filtern</button>
  {{ filter.form.non_field_errors }}
  <div class="boostrap-class">
    {{ filter.form.name.errors }}
    <label for="{{ filter.form.name.id_for_label }}" class="another-boostrap-class">Name</label>
    {{ filter.form.name }}
  </div>
  <div class="boostrap-class">
    {{ filter.form.description.errors }}
    <label for="{{ filter.form.description.id_for_label }}" class="another-boostrap-class">Description</label>
    {{ filter.form.description }}
  </div>
</form>

Вы также можете указать пользовательский Form класс в мета наборе фильтров (EquipmentFilter.Meta) и использовать техники, представленные в этом другом вопросе SO

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