使用Bootstrap 4布局表单数据(用于Django模板中的endfor / data )
使用Bootstrap 4布局表单数据(用于Django模板中的endfor / data )
提问于 2018-06-01 23:37:04
我正在尝试使用bootstrap将我的表单数据(一些文本和图像)绘制到屏幕上，以一种将数据块(文本+图像)放在一起而不是彼此下面的方式。我尝试了一下列的大小，但是我不能让它工作。所有的容器都在一个大屏幕上一个接一个地放置。在小屏幕上，布局是好的，但在大屏幕上，没有任何东西会翻转到剩余的列
<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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-02 00:33:26
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50646889
复制相关文章
相似问题