Як зробити 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">

Деякі з інших відповідей тут здаються "дурними". Навіщо використовувати мінімальну висоту або ще гірше фіксовану висоту?

Я думав, що це питання (рівна висота) було частиною причини прогресування подалі від плаваючих блок дівів?

Я використовую Bootstrap 4 (бета-версія 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" я зробив картки чуйними. За допомогою "картки h-100" я встановив усі карти на висоту їхнього батьківського стовпця. У моїй системі це працює, але я не фахівець. Тож, сподіваюся, я комусь допоміг.

Краще рішення, Bootstrap 4 має всі , що вам потрібно: використовувати .d-flexі .flex-fillклас. Не використовуйте, card-decksоскільки вони не реагують на чутливість. Я використовував col-sm, ви можете використовувати потрібний .colклас або використовувати col-lg-xстовпець x означає число ширини, наприклад, 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

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

Якщо ви замість цього ввімкнете режим флешбоку 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

Пов’язана
завантажувальна карта такої ж висоти в Col

Ось як я це зробив:

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

Це дає такий результат:

Ви можете використовувати карту-колоду, вона вирівняє всі карти ... це з офіційної сторінки завантажувача 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 є розтягнення, то .card-елемент (дочірній рядок або клас колекції карт) буде розтягнутим. зробивши висоту картки 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.

Якщо ви перевірите документацію, це стосується стилю мулярів - справа в тому, що вони не однакової висоти.