所以,我在烧瓶中有一个项目的 for 循环,我正在尝试找到一种方法将它们放置在页面上。我在引导卡中有一个任务的 for 循环。当用户创建卡片时,卡片变得非常愚蠢,并且定位变得非常奇怪。
截图:https://ibb.co/hRjCrFf(老师作业一和新任务)
HTML:
{% for taskname in tasknames %}
<div class="card" style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white" >{{ taskname[0] }}</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">{{ taskname[1] }}</h5>
<p class="card-text">{{ taskname[2] }} </p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
{% endfor %}
我尝试使用常用的 css 和位置样式。我期望它能够很好地定位,但我了解到,如果我将 for 循环中的多个项目放置在同一区域,它将与其他项目位于同一位置。
任何人都可以帮助解决这个问题吗?
注意:我希望它们水平放置。
你应该添加一个垂直排水沟 https://getbootstrap.com/docs/5.1/layout/gutters/#vertical-gutters对于不同行中的列之间的间距:gy-*
<div class="row row-cols-auto gy-3"> <!-- Added: gy-3 -->
... columns
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)