Почему отображается только один элемент в строке?

Question

[Ram Ce]

Нужно, чтобы блоки отображались списком по несколько элементов на одной строке, но отображается только один элемент, а следующий уже на новой строке идёт, помогите пожалуйста исправить.

<div class="container content">
  <div class="row">
    <div class="col-md-4">
      <div class="list-group">
        <a href="{% url 'products:productsList' %}"
          class="list-group-item {% if not category %}selected{% endif %}">Все</a>
        {% for c in categories %}
        <a href="{{ c.get_absolute_url }}"
          class="list-group-item {% if category.id == c.id %}selected{% endif %}">{{ c.name }}</a>
        {% endfor %}
      </div>
    </div>
    {% for product in products %}
    <div class="col-md-8">
      <div class="col-md-8 products">
        <div class="row">
          <div class="col-sm-4">
            <div class="product">
              <div class="product-img">
              <img src="{% if product.image %}{{ product.image.url }}{% else %}{% endif %}" alt="">
              </div>
              <p class="product-title">
                <a href="{{ product.get_absolute_url }}">{{ product.title }}</a>
              </p>
              <p class="product-price">{{ product.price }} руб.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

.product {
    display: flex;
	flex-direction: column;
    max-width: 200px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #c0c0c0;
    text-align: center;
    transition: all 0.5s ease;
    margin-bottom: 20px;
    min-width: 130px;
    height: 250px;
    padding-bottom: 10px;
}

.product:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
}

.product-img {
    height: 200px;
}

.product-img img {
    height: 100%;
    max-height: 140px;
	width: 100%;
	object-fit: cover;
}

.content {
    margin-top: 50px;
}

.product-title {
    margin-bottom: 10px;
}

.product-title a {
    color: #1C2331;
    font-weight: 500;
    text-transform: uppercase;
}

.product-price {
    width: 100%;
    color: #d51e08;
    font-size: 18px;
    font-weight: 500;
}

Comments

[Ram Ce]

Павел, просто стили съезжают и не исправляется

[Павел]

Ram Ce,

<div class="container content">
  <div class="row">
    <div class="col-md-4">
      <div class="list-group">
        <a href="{% url 'products:productsList' %}"
          class="list-group-item {% if not category %}selected{% endif %}">Все</a>
        {% for c in categories %}
        <a href="{{ c.get_absolute_url }}"
          class="list-group-item {% if category.id == c.id %}selected{% endif %}">{{ c.name }}</a>
        {% endfor %}
      </div>
    </div>>
    <div class="col-md-8 products">
      <div class="row">
         {% for product in products %}
        <div class="col-sm-4">
          <div class="product">
            <div class="product-img">
            <img src="{% if product.image %}{{ product.image.url }}{% else %}{% endif %}" alt="">
            </div>
            <p class="product-title">
              <a href="{{ product.get_absolute_url }}">{{ product.title }}</a>
            </p>
            <p class="product-price">{{ product.price }} руб.</p>
          </div>
        </div>
          {% endfor %}
      </div>
    </div>
  </div>
</div>

[Ram Ce]

Павел, ура, сработало. спасибо) добавьте в ответ

[Павел]

Ram Ce, не за что

Answer 1

[Павел]

Добавлю в ответ...

У вас цикл {% for product in products %} повторяет

<div class="col-md-8">
      <div class="col-md-8 products">

А должен только продукт

<div class="col-sm-4">
       <div class="product">

Вот ваш код:

<div class="container content">
  <div class="row">
    <div class="col-md-4">
      <div class="list-group">
        <a href="{% url 'products:productsList' %}"
          class="list-group-item {% if not category %}selected{% endif %}">Все</a>
        {% for c in categories %}
        <a href="{{ c.get_absolute_url }}"
          class="list-group-item {% if category.id == c.id %}selected{% endif %}">{{ c.name }}</a>
        {% endfor %}
      </div>
    </div>>
    <div class="col-md-8 products">
      <div class="row">
         {% for product in products %}
        <div class="col-sm-4">
          <div class="product">
            <div class="product-img">
            <img src="{% if product.image %}{{ product.image.url }}{% else %}{% endif %}" alt="">
            </div>
            <p class="product-title">
              <a href="{{ product.get_absolute_url }}">{{ product.title }}</a>
            </p>
            <p class="product-price">{{ product.price }} руб.</p>
          </div>
        </div>
          {% endfor %}
      </div>
    </div>
  </div>
</div>