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

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

.card {
    min-height: 200px;
}

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

Card image cap

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

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.

Last updated 3 mins ago

Ответы (21)

jsfiddle

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

.card{
    height: 350px;
}

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

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

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

CSS:

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

HTML:

aaaa
bbbb
cccc
dddd

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

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

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

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

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

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

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

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

You can apply the class h-100, which stands for height 100%.

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

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

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

CBe Happy

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

или

Другой полезный подход - Карточные сетки:

...
Название карточки

Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее.

...
Название карточки

Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее.

...
Название карточки

Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.

...
Название карточки

Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее.

Для Bootstrap 5 и 4

HEIGHT - поместите всю карту в div с class = "card-deck"

WIDTH - укажите стиль вашей карты {min-width: 50ch}

По вопросу, на который у меня есть ответ, он может вам помочь, и вы можете им воспользоваться. Вы можете просто использовать атрибут height и установить его как height: 100vh; Я использовал 70vh, и карты будут иметь фиксированную высоту, которую вы указали.



  
      
      
      

      
      

      
      
      
      
      
       Документ 
  
  
  <стиль>
      / * Используйте свойство height для установки одинаковой высоты карты * /
      .карта {
          цвет фона: # 56568a;
          маржа: 10px! important;
          высота: 70vh;
          ширина: авто;
      }
  
  
      
Заголовок изображения карточки
Запуск продукта

Использование социальных доказательств для роста

Duolingo устраняет языковые барьеры, объединяя людей, которые нуждаются веб-сайтов, переведенных со студентами что изучение язык ...

Правин Сегодня

Заголовок изображения карточки
ddc

Использование социальных доказательств для роста

Duolingo устраняет языковые барьеры, объединяя людей, которые нуждаются веб-сайтов, переведенных со студентами что изучение язык ...

Правин 2 дня назад

Вы можете добавить d-flex и flex-column к div с помощью card-body.

Вот рабочий пример:






Более длинный заголовок, заключенный в две строки

Lorem ipsum dolor

Привет, мир!

Conctetur Adipiscing Elit

CTA
Здесь меньший заголовок, заключенный в одну строку

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore magna aliqua.

Привет, мир!

рекламные объявления

CTA
Здесь более длинный заголовок, который охватывает 3 строки: Lorem ipsum dolor sit amet, Conctetur adipiscing elit

Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Привет, мир!

CTA

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

Card image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

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.

Last updated 3 mins ago

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

… content card …
… all the other cards …

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

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

ОБНОВИТЬ ПРИМЕР ПОЛНОГО HTML BS5

https://codepen.io/Kerrys7777/pen/QWgwEeG

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

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

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

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

Я столкнулся с этой проблемой, большинство людей используют 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% от высоты родителя, займет всю эту высоту.

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

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

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

ОБНОВЛЕНИЕ

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

это может вам помочь

просто следуйте этому коду

содержимое ....
содержимое ....
содержимое ....

использовать класс начальной загрузки "h-100"

Bootstrap 4 имеет все, что вам нужно: ИСПОЛЬЗУЙТЕ классы .d-flex и .flex-fill. Не используйте колоды карт , так как они не реагируют. Я использовал col-sm, вы можете использовать класс .col, который хотите, или использовать col-lg-x, x означает номер столбца ширины, например 4 или 3 для лучшего просмотра, если в посте их много, а затем 3 или 4 на столбец

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




Демо Bootstrap 4 одинаковой высоты

от djibe.

(спасибо BS4)

Зависимости: стандартный BS4

Наслаждайтесь магией флексбоксов и оставляйте бесполезные колоды карт.

Небольшая карточка содержимого.
"Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнения ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure. в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum ".
Еще одна небольшая карточка содержимого.

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

http://codeply.com/go/x91w5Cl6ip

The Bootstrap 4 alpha card-columns uses CSS3 columns which don't really support equal heights (except column-fill which is only suppored in Firefox).

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

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

http://codeply.com/go/YFFFWHVoRB

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

2022 WebDevInsider