django - 无法调整 django 中使用的 html 中卡片的对齐方式

我在 HTML 中添加了这些行以在前端呈现一些帖子和评论,但是如果我发布多个帖子,明信片的对齐方式就会变得不系统。一张卡片变大一张变小如何固定每个帖子的大小。

{

    % for post in posts %}
                    <div class="col-lg-9">
                      <!-- ROW -->
                      <div class="row ">
              
                          <div class="col-12 mb-2">
                              <div id = "clicked-post" class="card shadow-sm">
                    <div class="card-body">
                          <div class="card-title">
                              <h5>{{ post.title }} <br> Posted by: {{ post.created_by }} &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; {% if post.created_by == user %}<a href="{% url 'delete_post' post_id=post.id %}">Delete</a> {% endif %} </h5> 
                          <h6>Posted at: {{post.created_at}}[UTC 0]</h6>
                      </div>
                      <div class="card-main">
                          {{post.description}}
                      </div>


                      <div class="card-body">
                        <form  action="{% url 'create_comment' post.pk %}" method="post">
                            <div class="input-group">
                                {% csrf_token %}
                                {{ comment_form.comment_text|attr:"class:form-control rounded-pill"|attr:"placeholder:Add a class comment" }}
                                <div class="input-group-append">
                                    <button class=" btn btn-circle" type="submit" id="button-addon2"><i class="fas fa-angle-double-right"></i>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                      

                    <div class="card-body">
                        {% for comment in contents %}
                            {% if comment.post == post %}
                            <div class="d-flex flex-row">
                                <p class='ml-2'><strong>{{ comment.user }}</strong>: {{ comment.comment_text}}</p>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>

              </div>
                </div>
                      </div>
                  </div>
              {% endfor %}

回答1

尝试通过间距或制表符对齐您的 div,以便您可以直观地看到您是否未能关闭一个。看起来您未能关闭初始 div class="card-body"

<div class="col-lg-9">
    <!-- ROW -->
    <div class="row ">
        <div class="col-12 mb-2">
            <div id = "clicked-post" class="card shadow-sm">
                <div class="card-body">
                    <div class="card-title">
                        <h5>{{ post.title }} <br> Posted by: {{ post.created_by }} &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; {% if post.created_by == user %}<a href="{% url 'delete_post' post_id=post.id %}">Delete</a> {% endif %} </h5> 
                        <h6>Posted at: {{post.created_at}}[UTC 0]</h6>
                    </div>
                    <div class="card-main">
                        {{post.description}}
                    </div>
<!-- you may need an extra </div> here  to close your div -->
                    <div class="card-body">
                        <form  action="{% url 'create_comment' post.pk %}" method="post">
                            <div class="input-group">
                                {% csrf_token %}
                                {{ comment_form.comment_text|attr:"class:form-control rounded-pill"|attr:"placeholder:Add a class comment" }}
                                <div class="input-group-append">
                                    <button class=" btn btn-circle" type="submit" id="button-addon2"><i class="fas fa-angle-double-right"></i>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-body">
                        {% for comment in contents %}
                            {% if comment.post == post %}
                            <div class="d-flex flex-row">
                                <p class='ml-2'><strong>{{ comment.user }}</strong>: {{ comment.comment_text}}</p>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

相似文章