我想把这些卡片列在下面:
这就是到目前为止的代码.我的名片是垂直排列的.我怎样才能做到这一点呢？
{% 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 %}
循环目前为每件物品创建一个新的row，这就是为什么每张牌都在堆叠.它应该只循环col，而不是row.
col-sm-3意味着"sm及以上的每列使用3/12的空间"，这意味着在sm及以上的断点处使用4 columns(而不是3).使用col-sm-4可在sm及以上的位置显示每行3张牌，如果您希望始终显示每行3张牌，则只使用col-4.
{% 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 %}