kitscribe
@kitscribe
Хаброжитель

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

Есть шаблон карточки. Несколько её экземпляров создаётся 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>

  • Вопрос задан
  • 71 просмотр
Решения вопроса 2
AntonLitvinenko
@AntonLitvinenko
HTML coder
Я не знаю, за что отвечает обертка с классом 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>
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Как и любые другие элементы - в колонках заданной ширины
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Sanes
@Sanes
!
Цикл должен оборачивать group col-4
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы