css - 使用 Bootstrap 4 布局表单数据(用于 Django 模板中的 endfor/data)

Question

我正在尝试使用 bootstrap 将我的表单数据(一些文本和图像)以一种将数据 block (文本 + 图像)彼此相邻而不是彼此下方的方式部署到屏幕上。我玩弄了列大小，但我无法让它工作。所有容器都放在大屏幕上的下方。在小屏幕上布局很好，但在大屏幕上没有任何内容翻转到剩余的列

<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 具有出色的网格类。 Check it out here

我不完全确定您正在寻找什么布局，但也许这会让您朝着正确的方向前进

<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>