Boostrap 4 - Колода карт и разные размеры

Question

Я хочу отображать карту той же высоты, но разных размеров, с учетом сетки Boostrap.

Если я возьму пример колоды карт: https://jsfiddle.net/sb7t5y3x/, я просто хочу Например, первая карточка должна иметь размер col-6, для меня самый элегантный способ:

<div class="card col-6"> .... </div>

Но это не работает, поскольку .card-deck > .card применяет flex 1.

Итак, я попытался обернуть свои карты в столбец:

<div class="col-6">
    <div class="card"> ... </div>
</div>

Но у столбца есть отступы, а у карты есть поля, поэтому у меня применено 2 поля (см. https://jsfiddle.net/applyss/vcgkujxp/, пробелы не обычный)

Есть ли простой стандартный способ хранить карточки одинаковой высоты в сетке?

Answer 1

Это в основном дубликат bootstrap 4 колоды карт, содержащей карты разной ширины

Вы должны использовать сетку вместо колоды карт.

"Но у col есть отступы, а у карточки есть поля, поэтому у меня применено 2 поля, .. пробелы не регулярные" карточки в столбцы. Вы можете использовать служебные классы интервал для настройки полей или отступов, если необходимо.

<div class="container pt-3">
    <div class="row">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

Демо: https://codeply.com/p/hFvvJ63Tef

Answer 2

вы хотели, чтобы ваш код был таким? это простой способ иметь одинаковую высоту

https://jsfiddle.net/g428dbLs/
height:100%;

Answer 3

Это простой пример, очевидно, что это странно, но все div имеют одинаковую высоту, как вы хотите.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

  <script type="text/javascript" src="/js/lib/dummy.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="container pt-3">
<div class="card-deck">
  <div class="col-md-8  d-flex align-items-stretch">
  <div class="card">
    <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>
  <div class="card">
    <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 col-6">
    <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>