Bootstrap：将“卡片”水平对齐为单行

Posted 2023-02-24

【中文标题】Bootstrap：将“卡片”水平对齐为单行

【英文标题】：Bootstrap: align 'card's horizontally as a single row

【发布时间】：2020-07-02 11:43:45

【问题描述】：

我通过 for 循环连续渲染 4 个项目，问题是在第一行它渲染了 4 个项目，但循环中的其余项目在单独的行中渲染。

代码

<div class="card-group">

    % for item in wt %

          <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">

            <img src="/media/item.thumbnail" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">item.product_name</h5>
              <p class="card-text">item.thumbnail_desc</p>

              <a href="blog_detail/item.post_id" class="btn btn-primary">View Product</a>


            </div>
          </div>

    % if forloop.counter|divisibleby:4 %
    </div>
    % endif %

   % endfor %

这里我使用的是 bootstrap 和 django 框架...我也使用了“row”类，但它也不能很好地工作

【问题讨论】：

你能改一下你的问题吗？

什么不清楚？

您希望每个项目都在一行中吗？

% if forloop.counter|divisibleby:4 %

% endif % ...我想在一行中打印 4 个项目，所以它在第一行打印 4 个但不是全部

不，我要单行 4 件商品

【参考方案1】：

它应该自动连续执行 4 次，而无需添加额外的代码：

    % for item in wt %

          <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">

            <img src="/media/item.thumbnail" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">item.product_name</h5>
              <p class="card-text">item.thumbnail_desc</p>

              <a href="blog_detail/item.post_id" class="btn btn-primary">View Product</a>


            </div>
          </div> 
   % endfor %

如果没有，请尝试使用类“col-md-3”而不是“my-3”。

让我知道这是否有效。

【讨论】：

我发布了正确的答案，请参阅评论，这是造成问题的卡片大小...... my-3 添加了垂直间距，而 col-md-3 帮助使内容居中跨度>

【参考方案2】：

它通过改变卡片的大小并添加forloop的计数器来工作......主要问题是卡片的大小，它不适合容器

<h2 class="my-4 text-white bg-dark">New Arrivals</h2>
            <div class="row">
         % for item in wt %

          <div class="card text-white bg-dark mb-3" style="width: 10rem;">

            <img src="/media/item.thumbnail" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">item.product_name</h5>
              <p class="card-text">item.thumbnail_desc</p>

              <a href="detail/item.post_id" class="btn btn-primary">View Product</a>


            </div>
          </div>
                 % if forloop.counter|divisibleby:4 %
    </div>
        <div class="row">
    % endif %

   % endfor %

        </div>