Django/Bootstrap 4：如何对齐多个父 div 内的元素

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 cmets 添加到所有 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 %}