Как отобразить карточки Bootstrap ровными в цикле?

Question

[i_yan]

Мне нужно создать отображение туров в виде карточек на html-странице.

<div class="container">
    <div class="card-deck">
        <div class="mt-4"th:each="tour, iter: ${tours}" >
                <div class="card" style="width: 20rem" >
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title"><span th:utext="${tour.title}"/></h5>
                        <h6 class="card-subtitle mb-2 text-muted"><span th:utext="${tour.startTime}"/> по
                            <span th:utext="${tour.endTime}"/></h6>
                        <p class="card-text"><span th:utext="${tour.description}"/></p>
                        <a href="#" class="btn btn-primary">Переход куда-нибудь</a>
                    </div>
                </div>

        </div>
    </div>
</div>

Однако, у меня не получается сделать их равных по длине:



Какое свойство мне требуется назначить для корректного отображения?

Comments

[Сергей Горностаев]

Прчём тут Thymeleaf? Шаблонизатор просто формирует текст, который сервер отправит в клиентское соединение, как этот текст будет клиентом интепретироваться и отображаться - не его проблема.

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

от бустрапа сетки тут только container?

[i_yan]

Антон Литвиненко, есть ещё контейнер навигационной панели, он отдельно вставлен для навигации. С container он не объединен

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

i_yan, https://getbootstrap.com/docs/5.1/layout/grid/

Answer 1

[i_yan]

В общем, нашел решение, добавив доп. классы

<div class="container">
    <div class="card-deck mt-4">
        <div class="col-lg-4 d-flex mb-4 align-items-stretch" th:each="tour, iter: ${tours}">  <!--эта строка изменена-->
            <div class="card" style="width: 20rem">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><span th:utext="${tour.title}"/></h5>
                    <h6 class="card-subtitle mb-2 text-muted"><span th:utext="${tour.startTime}"/> по
                        <span th:utext="${tour.endTime}"/></h6>
                    <p class="card-text"><span th:utext="${tour.description}"/></p>
                    <a href="#" class="btn btn-primary">Переход куда-нибудь</a>
                </div>
            </div>
        </div>
    </div>
</div>

Правда, теперь кнопки вылезают, но это уже другой вопрос

Спасибо Антон Литвиненко за наводку

Comments

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

нашел да не все. родителем классов col обязательно должен быть класс row

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

совсем грубо както так

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title"></h5>
            <h6 class="card-subtitle mb-2 text-muted"></h6>
            <p class="card-text"></p>
            <a href="#" class="btn btn-primary">Переход куда-нибудь</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title"></h5>
            <h6 class="card-subtitle mb-2 text-muted"></h6>
            <p class="card-text"></p>
            <a href="#" class="btn btn-primary">Переход куда-нибудь</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title"></h5>
            <h6 class="card-subtitle mb-2 text-muted"></h6>
            <p class="card-text"></p>
            <a href="#" class="btn btn-primary">Переход куда-нибудь</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

[i_yan]

Антон Литвиненко, может так правильнее, но таким образом опять появляется проблема вопроса. Скорее из-за того, что карточки выводятся через цикл из записей в бд

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

i_yan, да мне то что. делайте как вам нравится