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

【问题标题】：Bootstrap: align 'card's horizontally as a single rowBootstrap：将“卡片”水平对齐为单行
【发布时间】：2023-03-27 03:25:01
【问题描述】：

我通过 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" alt="...">
            <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 件商品

标签： css django twitter-bootstrap bootstrap-4 django-templates

【解决方案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" alt="...">
            <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" alt="...">
            <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>

【讨论】：