Bootstrap 4 одинаковых по высоте списка групп внутри колоды карт

Question

Мне нравится создавать карточный стол с Bootstrap 4, который содержит внутренние списки или блоки карточек (независимо от разделов), и эти разделы должны иметь одинаковую горизонтальную высоту.

Я пытался использовать d-flex flex-column и list-groups . ничего не получилось, как ожидалось. установить фиксированную высоту для каждой секции не вариант.

Пример: https://jsfiddle.net/7kvktrh5/

Код:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container py-4">

  <div class="card-deck">

    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Product 1</h4>
        <p class="card-text"></p>
      </div>
      <hr>
      <div class="card-body">
        <p class="card-text">Some description</p>
      </div>
      <hr>
      <div class="card-body">
        <p class="card-text">Price</p>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Product 2</h4>
        <p class="card-text">Some Text</p>
      </div>
      <hr>
      <div class="card-body">
        <p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
      </div>
      <hr>
      <div class="card-body">
        <p class="card-text">Price</p>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Product 3</h4>
        <p class="card-text">This is a wider card little bit longer.</p>
      </div>
      <hr>
      <div class="card-body">
        <p class="card-text">Some description: This card textporting text belosuppal content.</p>
      </div>
      <hr>
      <div class="card-body">
        <p class="card-text">Price</p>
      </div>
    </div>
  </div>

Answer 1

надеюсь, вот ваше решение

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container py-4">

  <div class="card-deck">

    <div class="card border-bottom-0 rounded-top" style="border-radius:0;">
      <div class="card-body">
        <h4 class="card-title">Product 1</h4>
        <p class="card-text"></p>
      </div>

    </div>

    <div class="card border-bottom-0 " style="border-radius:0;">
      <div class="card-body">
        <h4 class="card-title">Product 2</h4>
        <p class="card-text">Some Text</p>
      </div>

    </div>

    <div class="card border-bottom-0" style="border-radius:0;">
      <div class="card-body">
        <h4 class="card-title">Product 3</h4>
        <p class="card-text">This is a wider card little bit longer.</p>
      </div>

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

    <div class="card rounded-0">
      <div class="card-body">
        <h4 class="card-title">Product 1</h4>
        <p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
      </div>

    </div>

    <div class="card rounded-0">
      <div class="card-body">
        <h4 class="card-title">Product 2</h4>
        <p class="card-text">Some Text</p>
      </div>

    </div>

    <div class="card rounded-0">
      <div class="card-body">
        <h4 class="card-title">Product 3</h4>
        <p class="card-text">This is a wider card little bit longer.           </p>
      </div>

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

    <div class="card border-top-0 rounded-bottom" style="border-radius:0;">
      <div class="card-body">
        <h4 class="card-title">Product 1</h4>
        <p class="card-text"></p>
      </div>

    </div>

    <div class="card border-top-0 rounded-bottom" style="border-radius:0;">
      <div class="card-body">
        <h4 class="card-title">Product 2</h4>
        <p class="card-text">Some Text</p>
      </div>

    </div>

    <div class="card border-top-0 rounded-bottom" style="border-radius:0;">
      <div class="card-body">
        <h4 class="card-title">Product 3</h4>
        <p class="card-text">This is a wider card little bit longer.           </p>
      </div>

    </div>
  </div>
  </div>