Как выровнять изображения карт в bootstrap 4.4, чтобы все карты имели одинаковую ширину и высоту.? - PullRequest
Новая
       42

Как выровнять изображения карт в bootstrap 4.4, чтобы все карты имели одинаковую ширину и высоту.?

0 голосов
/ 24 марта 2020

Так что, в основном, делая простой сайт с Django и bootstrap 4.4, я решил эту проблему. Я использовал «карточки» для добавления изображений книг в виде сетки, как в веб-приложении книжного магазина. Но карты не имеют равных размеров. Как выровнять изображения карточек в bootstrap 4.4, чтобы все карточки имели одинаковую ширину и высоту, сохраняя при этом их чувствительность к изменению размера окна .??

Моя проблема на изображении ниже. Как вы можете видеть, карты не одного размера, когда я добавляю разные изображения, это также меняет их размер. введите описание изображения здесь

html

<div class="container">

        <div class="row">
            {% for book in object_list %}
            <div class="col s3">
                <div class="card">
                    <img class="img-fluid" src="{{book.book_image}}" alt="">
                    <div class="card-body">

                    </div>
                </div>
                <p class="text-white">{{book.name}}</p>
            </div>
            {% endfor %}
        </div>
    </div>

и. css

body{
background: white url('images/webbg.jpg') no-repeat center center;
background-size: cover;
}

Пример изображения того, что я на самом деле хочу введите описание изображения здесь Я хочу точно так же, как на изображении выше, с изображениями, загружаемыми из моей базы данных в al oop. (чтобы не было жестко закодированных ссылок на изображения, встроенных в код html)

1 Ответ

0 голосов
/ 24 марта 2020

Звучит так, как будто вы можете использовать .card-deck для достижения своих целей

https://getbootstrap.com/docs/4.4/components/card/#card -колоды

Если .card-deck не будет работать для вас, вы можно использовать новые Grid Cards . Они позволяют вам выбрать, сколько карт вы хотите на строку в зависимости от размера экрана. Они не устанавливаются автоматически равными по высоте, однако это легко исправить, добавив .h-100 к карточкам.

Например, если вы хотите, чтобы по 4 карточки в ряду после точки останова xl, 3 после md и 2 на мобильном телефоне вы должны написать следующее. Обратите внимание, что в столбцах есть поле, чтобы освободить место при переносе. 

<div class="row row-cols-2 row-cols-md-3 row-cols-xl-4">
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
</div>
...