微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 mako 模板动态结束 div class=row/start new div row HTML

如何解决使用 mako 模板动态结束 div class=row/start new div row HTML

我正在尝试在我的 HTML 页面上使用 Mako for 循环显示课程列表。每门课程都有自己的卡片,一旦有三张卡片,我就试图结束这一行。我试着用这个循环

% if (loop.index % 3):
    </div>
    <div class="row">
  % end if

但是它会在一行上放两张卡片,然后在下一行放一张卡片,然后是 2,然后是 1,等等。我想使用循环,因为要显示的课程数量会随着课程的增加而变化添加数据库中。

这是我的模板文件:(从技术上讲,我的应用程序使用的语言是 Django-Mako-Plus,所以这可能是 Django 问题?)

<div class="container">
  <!-- Todo if using this style,figure out how to dynamically start/end bootstrap rows or similar solution -->
  <div class="row">

  % for a in allcourses:
  <div class="col-md-4">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="${ STATIC_URL }homepage/media/courseimg/${a.coursephoto}" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">${a.coursetitle}</h5>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item" style="text-align: center; font-style:italic; text-size:small;"><strong>${a.instructorid.instructorname} - Instructor</strong><br>${a.credithours.normalize()} Training Hours / 0.${a.credithours.normalize()} CEU</li>
      </ul>
      <div class="card-body">
        <p class="card-text">${a.coursedescription|truncatewords:15}</p>
        <a href="/homepage/checkout/" class="btn btn-primary stretched-link">Learn More</a>
      </div>
    </div>
  </div>
% if (loop.index % 3):
    </div>
    <div class="row">
  % end if

  % endfor

  </div>
</div>

任何帮助将不胜感激!我对 Mako 模板很陌生。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。