html - 如何使创建的帖子连续四个并在下一行继续？

Question

在此处输入图片描述标题：CSS 样式问题 问题：如何设置连续四张图片的样式？然后另一张图片将自动到下一行背景信息：在此处输入图像描述在此处 输入图像描述

问题：这是我的product.html。它以 HTML 格式显示产品。它变得很奇怪，画面就像一个楼梯往下掉。

{% for product in product_images %}
    
            <div class="container" id="big">
                <div class="row">
                    <div class="card"  style="width: 18rem;">
                        <img src="{{url_for('static',filename='products/' + product.product_images)}}"  class="card-img-top" alt="...">
                        
                        <div class="card-body">
                        <h5 class="card-title">{{ product.product_name }}</h5>
                        <p class="card-text">price:${{ product.price }}</p>
            
                    </div>
                </div>
            </div>
    
      {% endfor %}
    <style>
.row {
display: flex;
width: 100% ;
}    
.card {
width: 25%
}
</style>
    

这是我创建的product.html。我使用表单为程序创建上传产品图像。我可以创建产品图像，但是产品图像显示在一行中，我希望产品图像在一行中有 4 个图像，那么第 5 个产品将自动转到下一行。

{% extends "base.html" %}
{% block body %}
<div class="content-section">
    <form method="POST" enctype="multipart/form-data">
        {{form.hidden_tag()}}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend }}</legend>

            <div class="form-group">
                {{form.product_name.label(class="form-control-label")}}
                {% if form.product_name.errors %}
                    {{form.product_name(class="form-control form-control-lg is-invalid")}}
                    <div class="invalid-feedback">
                        {%for error in form.product_name.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{form.product_name(class="form-control form-control-lg")}}
                {% endif %}
            </div>


            <div class="form-group">
                {{form.product_price.label(class="form-control-label")}}
                {% if form.product_price.errors %}
                    {{form.product_price(class="form-control form-control-lg is-invalid")}}
                    <div class="invalid-feedback">
                        {%for error in form.product_price.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{form.product_price(class="form-control form-control-lg")}}
                {% endif %}
            </div>

            <div class="upload-file">
                {{form.product_image.label}}
                <input type="file" accept="image/png, image/jpeg" name="violin_product" />
            </div>
        </fieldset> 
        <div class="form-group">
            {{form.submit(class="btn btn-outline-info")}}
        </div>
    </form>
</div>
{% endblock body %}

这是我的 base.html 代码

<main role="main" class="container">
      <div class="row">
        <div class="col-md-12">
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                  {{ message }}
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}
          {% block body %}{% endblock %}
        </div>
       
      </div>
    </main>

Answer 1

我认为您缺少孩子的flex属性：

.card {
  flex: 25%
}