Как сделать карты Bootstrap 4 одинаковой высоты в столбцах карт?

135

Я использую Bootstrap 4 alpha 2 и использую карты. В частности, я работаю с этим примером, взятым из официальных документов. Как сделать все карточки одинаковой высоты?

Все, что я могу сейчас думать, это установить следующее правило CSS:

.card {
    min-height: 200px;
}

Но это просто жестко запрограммированное решение, которое в общем случае не сработает. Код, на мой взгляд, такой же, как и в документации, т.е.

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

— blueSurfer
источник

Есть какие-нибудь усилия? Есть код, которым можно поделиться?

— baao 08

2

Это пример для колонн, похожих на каменную кладку. Вся суть этого стиля в том, что карты разной высоты. Используйте колоду и включите режим flexbox, если вы хотите одинаковой высоты.

— Квентин

1

Колода работает только для карт подряд. Я хочу того же эффекта, card-columnsно с той же высотой.

— blueSurfer 08

163

Вы можете поместить классы в «строку» или «столбец»? Не будет видно на карточках (рамке), если вы используете ее в строке. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

Некоторые другие ответы здесь кажутся «дурацкими». Зачем использовать минимальную высоту или, что еще хуже, фиксированную высоту?

Я думал, что эта проблема (равная высота) была одной из причин отказа от плавающих блоков div?

— Kerry7777
источник

3

h-100 - это не фиксированная высота, это высота на 100% (строки)

— konyak

это должен быть ответ

— ACed

Это настоящий ответ

— Эндрю Баллок

@konyak да, я понимаю этого приятеля. Я не имею в виду h-100 (прокрутите страницу вниз).

— Kerry7777

@ Kerry7777, дружище, спасибо за столь необходимые разъяснения! Кроме того, в моем случае было критически важно добавить d-flex align-items-stretch к div, сохраняющим мои карточки, но мне также нужно было добавить h-100как карточку, так и нижние колонтитулы карточек, чтобы все они совпадали

— Кайл Беркетт

139

Я использую Bootstrap 4 (Beta 2). Между тем ситуация вроде бы изменилась. У меня была такая же проблема, и я нашел простое решение. Это мой код:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

С помощью "col-sm-12 col-lg-6" я сделал карточки отзывчивыми. С помощью «card h-100» я установил все карты на высоту их родительского столбца. В моей системе это работает, но я не профессионал. Итак, надеюсь, я кому-то помог.

— user3350279
источник

16

so simple h-100

— PNC

9

.h-100 - блестящий

— JCraine

2

Это помогло мне, когда d-flexвозникли проблемы с IE (который я должен поддерживать). Я просто добавил mb-4в родительский div, чтобы еще немного разделить карточки.

— Чарльз Паске

и вы также можете использовать .pre-scrollable для вертикальной прокрутки

— Мухаммад Вакас Азиз

Я бы добавил класс .py-2 ко всем div с классом .col- *, чтобы добавить отступы между строками.

— konyak

95

Лучшее решение, Bootstrap 4 имеет все , что вам нужно: использовать .d-flexи .flex-fillкласс. Не используйте, card-decksпоскольку они не реагируют. Я использовал col-sm, вы можете использовать нужный .colкласс или использовать col-lg-xx означает номер столбца ширины, например, 4 или 3 для лучшего просмотра, если в сообщении много, а затем 3 или 4 на столбец

Вот зверь, попробуйте уменьшить окно браузера до XS, чтобы увидеть его в действии:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Развернуть фрагмент

— djibe
источник

1

Этот ответ отлично работает! Если вы не можете использовать «столбец карточек» или «колоду карточек», чтобы получить желаемое поведение во всех окнах просмотра.

— Getsomepeaches

Это сработало для меня. У меня есть столбец с одной большой карточкой, а справа - другой столбец с двумя строками. Итак, левая карточка занимает высоту двух соседних строк, спасибо!

— Эрих Гарсия

Это был путь. Я пробовал, card-columns но не могло занимать более трех столбцов в строке. Спасибо за этот ответ

— Yeku Wilfred Chetat

card-deck не работает в моем случае, ваш ответ сработал!

— ГТД,

31

Вы можете применить класс h-100, который обозначает высоту 100%.

— bsesic
источник

12

ОБНОВЛЕНИЕ: в Bootstrap 4 теперь по умолчанию используется flexbox, и каждая card-deckстрока будет содержать 3 карты. Карты заполнятся на всю высоту.

http://www.codeply.com/go/x91w5Cl6ip

Альфа- card-columnsверсия Bootstrap 4 использует столбцы CSS3, которые на самом деле не поддерживают равную высоту (за исключением заполнения столбцов, которое поддерживается только в Firefox).

Если вы вместо этого включите режим Flexbox в Bootstrap 4, вы можете вместо этого использовать card-deckCSS и немного для выравнивания высоты и переноса каждые 3 столбца.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Связанная
карта начальной загрузки той же высоты в столбце

— Zim
источник

Я разветвил ваш код, чтобы что-то проверить; Мне также нужно, чтобы заголовки растягивались, чтобы иметь одинаковую высоту, чего здесь не происходит: codeply.com/go/fqnQZ2ZGJy - знаю, каким образом я могу добиться того, чтобы мой "Более короткий заголовок" занимал ту же высоту, что и более длинное название? Я пробовал поиграть с flexbox и сетками, но не могу понять, что нужно.

— davewoodhall

11

Вот как я это сделал:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

— Ник
источник

4

заверните карты внутрь

<div class="card-group"></div>

или

<div class="card-deck"></div>

— Муджтаба Каблы
источник

3

Я использовал несколько иной подход. Использование обертки колоды карт

Я добавил правило стиля, ограничивающее высоту блока карты:

.card .card-block {max-height:300px;overflow:auto;}

Это даст следующий результат:

— skrile
источник

3

Вы можете использовать колоду карт, она выровняет все карты ... это взято с официальной страницы bootstrap 4.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

— jeyglo
источник

2

Еще один полезный подход - карточные сетки :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Развернуть фрагмент

— Антонио Петричка
источник

1

Самый минимальный способ добиться этого (о котором я знаю) :

Подать заявление .text-monospace ко всем текстам в карточке.
Ограничьте все тексты на карточках одинаковым количеством символов.

ОБНОВИТЬ

Добавьте .text-truncateназвание карты и другие тексты. Это переводит текст в одну строку. Делаем карточки одинаковой высоты.

— doncadavona
источник

Я думаю, что вы далеки от этого ответа. Каждая карточка или раздел рабочей веб-страницы явно будет иметь разное количество текста (символов) и использовать шрифты / гарнитуры, которые не являются моноширинными. Зачем вам нужно обрезать текстовый контент, который посетители (не могут) прочитать?

— Kerry7777

@ Kerry7777, вы можете усечь длинную строку и добавить в конец "...", чтобы пользователи знали, что она была усечена. Чтобы они прочитали всю строку, им нужно будет щелкнуть или навести на нее курсор. Таким образом, мы можем согласовывать отображаемое содержимое. Потому что содержимое не то же самое. Некоторые короткие, некоторые длинные, а пространство на экране ограничено.

— doncadavona

1

В некоторых случаях карточки могут быть неравными по высоте только из-за длины текста. Так что этот ответ полезен.

— Mohammed Shareef C

1

Я новичок в этом, поэтому, пожалуйста, простите, если я чего-то упускаю.

Я пробовал многое из вышеперечисленного. Если вы установите высоту = 100%, карта всегда будет расширяться до максимальной длины самой длинной карты. Контейнер будет ограничивать все одинаковой длины.

Я хотел увидеть контейнер, поэтому использовал цвет фона, чтобы понять, что происходит.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

— csaw
источник

0

это сработало для меня:

<div class="card card-body " style="height:80% !important">

принудительное использование нашего CSS поверх общего CSS начальной загрузки.

— Дзениш Праджапати
источник

0

Я столкнулся с этой проблемой, большинство людей используют jQuery ... Вот мое решение. «Не возражайте, я в этом только новичок ...»

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Если высота любого элемента карты составляет, например, 400 пикселей (в зависимости от его содержимого), поскольку по умолчанию для flex-align установлено значение stretch, то .card-item (дочерний элемент класса row или card-collection) будет растянут. установка высоты карты, равной 100% от высоты родителя, займет всю эту высоту.

Надеюсь, я был прав. Я?

— Альб Рик Би
источник

-3

Если кому-то интересно, есть плагин jquery под названием: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight делает высоту всех выбранных элементов точно равной. Он обрабатывает множество крайних случаев, когда аналогичные плагины не работают.

Для ряда карточек я использую:

<div class="row match-height">

Затем включите для всего сайта:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

— rlu7732
источник

-12

jsfiddle

Просто добавьте нужную высоту с помощью CSS, например:

.card{
    height: 350px;
}

Вам нужно будет добавить свой собственный CSS.

Если вы проверите документацию, это для стиля масонства - дело в том, что они не все одинаковой высоты.

— PlatinumJay
источник

Кажется, что содержимое карточек неправильно выровнено. Это решение слишком ручное. Интересно, есть ли что-то более "умное"

— blueSurfer 08

Вы можете попробовать что-нибудь с jQuery, чтобы динамически создать высоту. Зависит от того, что вы хотите с ними делать.

— PlatinumJay

Просто очень любопытно узнать, почему так много голосов против? потому что кажется, что это работает

— Кик Бутовски 09

2

Разве это не означает, что карта остается фиксированной высоты, а не отзывчивой одинаковой высоты?

— Роберт Эндрюс