Question

我正在尝试使用bootstrap将我的formdata（一些文本和图像）用于将数据块（文本+图像）彼此相邻而不是彼此相邻的方式。我玩过列大小但我无法让它工作。所有容器都放在一个大屏幕上。在小屏幕上布局很好，但在大屏幕上没有任何东西翻转到剩下的列

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

使用Bootstrap 4布局表单数据（对于Django模板中的endfor / data）

1 个答案: