python - Django/ Bootstrap 4 : How to align elements inside of multiple parent divs

Question

所以我正在开发一个网站，但我终其一生都不知道如何在同一网站的多个版本中对齐描述、价格、库存和添加购物车按钮 <div> .我知道这与我使用的图像大小有关，但我不确定如何解决这个问题。

这是我希望它看起来如何的图表:

---

但是当我申请 'h-100'类到卡<div>这是发生了什么:

我希望图片保持它们的位置，但对于描述，添加购物车按钮和价格/库存以水平对齐，并且所有卡片的高度相同。

这是我的 Django 模板代码:

{% extends 'base.html' %}
{% block content %}

<div class="container-fluid">
    <div class="jumbotron">
        <h2>Welcome to MyTea</h4>
        <p>Here we have teas of all varieties from all around the globe</p>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <h4>Categories</h4>
            <ul class="list-group">
                <a href="{% url 'products' %}" class="list-group-item">All Categories</a>
                {% for c in countcat %}
                    <a href="{{ c.get_absolute_url }}" class="list-group-item catheight">{{c.name}}
                        <span class="badge badge-light">{{c.num_products}}</span>
                    </a>
                {% endfor %}
            </ul>
        </div>
        <div class="col-sm-9">
        {% for product in products %}
        {% if forloop.first %}<div class="row">{% endif %}
                <div class="col-sm-6">
                    <div class="card border-primary mt-3 h-100">
                        <div class="card-header"><h3>{{product.name}}</h3></div>
                        <div class="card-body">
                            {% if product.image %}
                            <div class="h">
                                <img src="{{product.image.url}}" class="img-fluid">
                            </div>
                            {% endif %}
                            <p class="bg-light font-weight-light ">{{product.description}}</p>

                            {% if product.stock > 0 %}
                            <a href="{% url 'add_cart' product.id %}" type="button" class="btn btn-primary btn-sm mb-2">
                                <p class="m-0">Add to cart</p>
                            </a>
                            {% else %}
                            <a href="#" type="button "class="btn btn-danger btn-sm mb-2">
                                <p class="m-0">Out of stock</p>
                            </a>
                            {% endif %}
                            <div class="card-footer">
                                <p>Price: &euro;{{product.price}}</p>
                                <p>Stock left: {{product.stock}}</p>
                            </div>
                        </div>
                    </div>
                </div>
        {% endfor %}
        </div>
    </div>
</div>
{% endblock content %}

感谢您的帮助

Answer 1

可以通过简单地重新对齐.card 中的内容来更正代码。并正确关闭 </div>声明。

1. 删除 {% if forloop.first %}<div class="row">{% endif %}声明及地点<div class="row">在 for 循环之上。
2. Add to cart和 Out of stock按钮应放在 .card-footer 内和 .card-body应适当关闭。这会将图像和描述留在 .card-body 中
3. 确保h-100类被添加到“.card”。

我可以建议添加 end of div对所有 div 语句的注释。通过这种方式，代码可读性更好，有助于减少丢失或错放的情况 </div>声明。

{% extends 'base.html' %} 
{% block content %}
    <div class="container-fluid">
       <div class="jumbotron">
        <h2>Welcome to MyTea</h4>
        <p>Here we have teas of all varieties from all around the globe</p>
    </div>
    <!-- .jumbotron -->
    <div class="row">
      <div class="col-sm-3">
        <h4>Categories</h4>
        <ul class="list-group">
          <a href="{% url 'products' %}" class="list-group-item">All Categories</a> 
          {% for c in countcat %}
              <a href="{{ c.get_absolute_url }}" class="list-group-item catheight">{{c.name}}
                  <span class="badge badge-light">{{c.num_products}}</span>
              </a> 
          {% endfor %}
        </ul>
      </div>
      <!-- .col-sm-3 -->
      <div class="col-sm-9">
        <div class="row">
          {% for product in products %}
            <div class="col-sm-6">
              <div class="card border-primary mt-3 h-100">
                <div class="card-header">
                  <h3>{{product.name}}</h3>
                </div>
                <!-- .card-header -->
                <div class="card-body">
                  {% if product.image %}
                    <div class="h">
                      <img src="{{product.image.url}}" class="img-fluid">
                    </div>
                    <!-- .h -->
                  {% endif %}
                  <p class="bg-light font-weight-light ">{{product.description}}</p>
                </div>
                <!-- .card-body -->
                <div class="card-footer">
                  {% if product.stock > 0 %}
                    <a href="{% url 'add_cart' product.id %}" type="button" class="btn btn-primary btn-sm mb-2">
                      <p class="m-0">Add to cart</p>
                    </a>
                  {% else %}
                    <a href="#" type="button " class="btn btn-danger btn-sm mb-2">
                      <p class="m-0">Out of stock</p>
                    </a>
                  {% endif %}
                  <p>Price: &euro;{{product.price}}</p>
                  <p>Stock left: {{product.stock}}</p>
                </div>
                <!-- .card-footer -->
              </div>
              <!-- .card -->
            </div>
            <!-- . col-sm-6 -->
          {% endfor %}
        </div>
        <!-- .row -->
      </div>
      <!-- .col-sm-9 -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container-fluid -->
{% endblock content %}