英文:
List 3 bootstrap cards per row using template loop
问题
我想将卡片列出如下：
到目前为止，这是我的代码。我的卡片垂直逐个列出。我如何实现这一点？
{% extends 'base_content.html' %}
{% block content %}
{% for item in CATEGORY_CHOICES %}
<div class="row" style="justify-content: center;">
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ item.1 }}</h5>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
英文:
I'd like to list the cards as down below:
This is the code so far. My cards are listed one by one vertically. How can I achieve this?
{% extends 'base_content.html' %}
{% block content %}
{% for item in CATEGORY_CHOICES %}
<div class="row" style="justify-content: center;">
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ item.1 }}</h5>
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
答案1
得分: 1
-
当前的循环为每个项目创建一个新的“row”，这就是为什么每张卡都堆叠在一起。它只应该循环“col”，而不是“row”。
-
col-sm-3表示“在sm及以上的屏幕上每列使用12份中的3份空间”，这意味着在sm断点及以上显示4列（而不是3列）。如果你想在sm及以上的屏幕上每行显示3张卡，可以使用col-sm-4，或者如果你希望在任何时候都显示3张卡，可以使用col-4。
{% extends 'base_content.html' %}
{% block content %}
<!-- 不要在这里循环 -->
<div class="row justify-content-center">
<!-- 只循环列 -->
{% for item in CATEGORY_CHOICES %}
<div class="col-sm-4"> <!-- 不是 "col-sm-3" -->
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ item.1 }}</h5>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
英文:
-
The loop currently creates a new
rowfor each item, which is why every card is stacking. It should only loopcol, notrow. -
col-sm-3means "use 3/12 space per column atsmand above" which means 4 columns (not 3) at thesmbreakpoint and above. Usecol-sm-4to display 3 cards per row atsmand above, or justcol-4if you want 3 cards per row at all times.
{% extends 'base_content.html' %}
{% block content %}
<!-- don't loop here -->
<div class="row justify-content-center">
<!-- only loop the columns -->
{% for item in CATEGORY_CHOICES %}
<div class="col-sm-4"> <!-- not "col-sm-3" -->
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ item.1 }}</h5>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论