javascript - 如何在 Bootstrap4 中设置列​​的高度

Question

如何将列的高度设置为相同，就像它们之间的匹配一样这是 3 列的 html 代码。

<div class="container">
    <div class="row">
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
        </div>
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
        </div>
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
        </div>
    </div>
</div>

我想实现这样的目标：

标签： javascripthtmlcssajaxbootstrap-4

Answer 1

用来上课h-auto，col它的孩子给的h-100高度一样

并添加 align-items:center !important;display:grid !important;到list-group-item课堂。

.list-group-item{
  align-items:center !important;
  display:grid !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-4 list-group h-auto text-center">
            <a href="" class="list-group-item h-100">asd</a>
            <a href="" class="list-group-item h-100">asd</a>
            <a href="" class="list-group-item h-100">asd</a>
        </div>
        <div class="col-4 list-group h-auto text-center">
            <a href="" class="list-group-item h-100">asd</a>
            <a href="" class="list-group-item h-100">asd</a>
        </div>
        <div class="col-4 list-group h-auto text-center">
            <a href="" class="list-group-item h-100">asd</a>
        </div>
    </div>
</div>

请试试这个