背景颜色后的bootstrap 4列高问题

Question

我正在编写一个引导代码，在列内我已经定义了带有背景颜色的 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

基本上这是duplicate。

列的高度相同，因为 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>

Answer 2

根据我对您的问题的理解，您希望所有 .col 的高度相同...

将height: 150px; 的CSS 属性（输入您想要的任何大小）添加到.col。但是，如果您希望背景成为 .col 的整个背景，则需要将其移动到 .col div 元素（我在其中放置蓝色和橙色）。

附：蓝色和橙色只是为了告诉你每个.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>