Как разместить по 3 карточки bootstrap в строке?

Question

[Kit Scribe]

Есть шаблон карточки. Несколько её экземпляров создаётся Jinja. Но у меня не получается разместить их в строку по 3 штуки и дать им фиксированный размер с автоматическими отступами между ними.

Какой class я могу использовать, чтобы поместить 12 элементов на странице по 3 в строку? Как правильнее задать указание максимального размера карточки? Спасибо

Код карточки

<div class="card">
  <div class="card-body">
    <h5 class="card-title">{{ post.title }}</h5>
    <p class="card-text">{{ post.body | truncate(100) | safe }}</p>
    <a href="{{ post.get_absolute_url() }}" class="card-link">View post</a>
    <p class="card-text">{{ post.date }}</p>
  </div>
</div>

Текущая версия

{% block body %}
<div class="card-group col-4">
    {% for post in post_list %}
    <div class="card" style="max-width: 250px; height: auto;">
        <div class="card-body">
            <h5 class="card-title">{{ post.title }}</h5>
            <p class="card-text">{{ post.body | truncate(100) | safe }}</p>
            <a href="{{ post.get_absolute_url() }}" class="card-link">View post</a>
            <p class="card-text">{{ post.date }}</p>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}
    {% endfor %}
</div>

Answer 1

[Антон Литвиненко]

Я не знаю, за что отвечает обертка с классом card-group, но если хотите в бутстрап, то ваша разметка будет выглядеть както так

<div class="card-group">
	<div class="row">
		{% for post in post_list %}
		<div class="col-md-4">
			<div class="card" style="max-width: 250px; height: auto;">
				<div class="card-body">
					<h5 class="card-title">{{ post.title }}</h5>
					<p class="card-text">{{ post.body | truncate(100) | safe }}</p>
					<a href="{{ post.get_absolute_url() }}" class="card-link">View post</a>
					<p class="card-text">{{ post.date }}</p>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</div>

Answer 2

[Sanes]

Цикл должен оборачивать group col-4

Comments

[Kit Scribe]

Теперь вместо row отображения они превратились в column