bootstrap 4 высота столбца после цвета фона

Question

Я пишу код bootstrap, внутри столбцов я определил div с цветом фона, но цвет фона меняется только на содержимое и из-за различий в данных, поэтому он выглядит неравномерно, некоторые столбцы выше, а некоторые меньше. Я выбрал этот подход, потому что мне нужно расстояние между столбцами, чтобы он выглядел как карты с закругленными краями. Как я могу иметь такую ​​же высоту столбца.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2">
  <div class="rounded" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col-xl-2">
  <div class="rounded" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col-xl-2">
  <div class="rounded" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>

Answer 1

Из того, что я понимаю в вашей проблеме, вы хотите, чтобы все .col были одинаковой высоты ...

Добавление CSS свойства height: 150px; (введите любой размер, который вы хотите) до .col. Однако, если вы хотите, чтобы фон был целым фоном .col, вам нужно переместить его в этот элемент .col div (где я поместил синий и оранжевый).

PS синий а оранжевый просто показывает вам высоту каждого .col

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2" style="height: 150px; background-color: orange;">
  <div class="rounded" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: blue;">
  <div class="rounded" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: orange;">
  <div class="rounded" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>

Answer 2

По сути, это дубликат .

Высота столбцов одинакова, поскольку Bootstrap 4 использует flexbox. Просто добавьте h-100 (height:100%) к закругленным контейнерам, чтобы заполнить высоту столбцов.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
  <div class="rounded h-100" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col">
  <div class="rounded h-100" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col">
  <div class="rounded  h-100" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>