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

Я использую 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>

Вы можете поместить классы в «строку» или «столбец»? Не будет видно на карточках (рамке), если вы используете ее в строке. 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?

Я использую 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» я установил все карты на высоту их родительского столбца. В моей системе это работает, но я не профессионал. Итак, надеюсь, я кому-то помог.

Лучшее решение, 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>

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

ОБНОВЛЕНИЕ: в 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

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

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

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>

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

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

или

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

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

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

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

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

Вы можете использовать колоду карт, она выровняет все карты ... это взято с официальной страницы 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>

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

<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>

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

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

ОБНОВИТЬ

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

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

Я пробовал многое из вышеперечисленного. Если вы установите высоту = 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>

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

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

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

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

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

Если кому-то интересно, есть плагин 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
});

jsfiddle

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

.card{
    height: 350px;
}

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

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