Данные формы макета с помощью Bootstrap 4 (для endfor / data в шаблоне Django)

Question

Я пытаюсь разместить свои форм-данные (текст и изображение) на экране с помощью начальной загрузки таким образом, что блоки данных (текст + изображение) располагаются рядом друг с другом, а не под друг другом.Я играл с размерами столбцов, но я не могу заставить его работать.Все контейнеры размещены друг под другом на большом экране.На маленьком экране расположение хорошее, но на большом экране ничто не переворачивается на оставшиеся столбцы

<div class="container-fluid">

<h1 class="my-4 text-center text-lg-left">Thumbnail Gallery</h1>

    {% block content %}
    {% for contexts in context %}
    <div class="col-lg-auto col-lg-auto col-6-auto">
    <h2>Title: {{ contexts.title }}</h2>
    <p>Category: {{ contexts.category }}</p></div>
    <p>Description: {{ contexts.description }}</p>
    <p>Price: {{ contexts.price }}</p>
    <p>Created: {{ contexts.created }}</p>
    <img class="img-fluid img-thumbnail" src="{{contexts.document.url}}" width="20%" height="20%"/>
    </div>
    {% endfor %}
</div>

Answer 1

Bootstrap имеет отличные классы сетки. Проверьте это здесь

Я не совсем уверен, какой макет вы ищете, но, возможно, это поможет вам в правильном направлении

<div class="row col-6">
    <div class="col-6 left">
        <h2>Title: {{ contexts.title }}</h2>
        <p>Category: {{ contexts.category }}</p></div>
        <p>Description: {{ contexts.description }}</p>
        <p>Price: {{ contexts.price }}</p>
        <p>Created: {{ contexts.created }}</p>
    </div>
    <div class="col-6 right">
        <img class="img-fluid img-thumbnail" src="{{contexts.document.url}}"/>
    </div>
</div>