在 Django 模板中将卡片组划分为行的最佳方法 - Django

Posted 2023-02-24

【中文标题】在 Django 模板中将卡片组划分为行的最佳方法 - Django

【英文标题】：The best way to divide card-deck into rows in Django template - Django

【发布时间】：2021-01-03 02:34:00

【问题描述】：

我想在一个页面中显示 6 个具有相同设计的项目，例如这张照片：https://pasteboard.co/Jrkehgg.png。

我在 html 页面中有这段代码：

% for android in single_android_post %
   <div class="card-deck">

     <div class="card">
       <img class="card-img-top" src=" android.get_image "   >
       <div class="card-body">
         <h5 class="card-title"> android.name </h5>
         <p class="card-text">  android.app_contect </p>
       </div>
       <div class="card-footer">
         <small class="text-muted"> android.post_date</small>
         <small class="firstsmall"><a class="bg-orange" href="" title=""> android.post_tag</a></small>
       </div>
     </div>

</div>
% endfor %

我试过这段代码，但每张卡片都占据了所有的页面宽度。我该如何解决？

【问题讨论】：

没有 django 模板也能完美运行吗？

是的，如果我在 中添加 3 个

4 <div class="card"> </div> inside <div class="card-deck"> 怎么样。它仍然有效还是必须为 3？

如果我添加 4 或 5 个等 .. 在 里面会显示所有项目，例如照片 这是我不想发生的事情，我想显示 3 个项目在行中然后在底部显示更多 3 项不彼此相邻

【参考方案1】：

你可以这样做：

<div class="card-deck">
% for android in single_android_post %
    <div class="card">
       <img class="card-img-top" src=" android.get_image "   >
       <div class="card-body">
         <h5 class="card-title"> android.name </h5>
         <p class="card-text">  android.app_contect </p>
       </div>
       <div class="card-footer">
         <small class="text-muted"> android.post_date</small>
         <small class="firstsmall"><a class="bg-orange" href="" title=""> android.post_tag</a></small>
       </div>
     </div>
    % if forloop.counter|divisibleby:3 %
</div>
<div class="card-deck">
    % endif %
% endfor %
</div>

请参阅：forloopcounter 和 divisibleby

【讨论】：

哦，谢谢它的完美工作，感谢您的时间