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 комментариев ко всемзаявления див. Таким образом, код лучше читается и помогает смягчить пропущенные или неуместные операторы </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 %}