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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (19)

我试图使用引导将数据块(文本+图像)放置在相邻的数据块(文本+图像)上,将格式数据(一些文本和图像)绘制到屏幕上,而不是放在下面。我到处摆弄柱子的大小,但我不能让它起作用。所有的容器都放在一个大屏幕上。在小屏幕上,布局很好,但在大屏幕上,没有任何东西翻转到其余的列上。

<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>
提问于
用户回答回答于

不太清楚你在找什么布局,但也许这会让你走上正确的方向

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

扫码关注云+社区

领取腾讯云代金券