我的页面上有一行和一些列。这些包含卡片,内容量略有不同。但我希望这些都具有相同的高度。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
<div class="col-md-3 ">
<div class="card">
<img src="image1.jpg" class="img-fluid" alt="" />
<div class="card-body overflow-hidden text-center">
<h4 class="color-primary">card 1</h4>
<p></p>
<a href="" class="btn btn-info"><i class="zmdi zmdi-
download"></i>download</a>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="image1.jpg" class="img-fluid" alt="" />
<div class="card-body overflow-hidden text-center">
<h4 class="color-primary">card 1</h4>
<p></p>
<a href="" class="btn btn-info"><i class="zmdi zmdi-
download"></i>download</a>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="image1.jpg" class="img-fluid" alt="" />
<div class="card-body overflow-hidden text-center">
<h4 class="color-primary">card 1</h4>
<p></p>
<a href="" class="btn btn-info"><i class="zmdi zmdi-
download"></i>download</a>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="image1.jpg" class="img-fluid" alt="" />
<div class="card-body overflow-hidden text-center">
<h4 class="color-primary">card 1</h4>
<p></p>
<a href="" class="btn btn-info"><i class="zmdi zmdi-
download"></i>download</a>
</div>
</div>
</div>
</div>
如您所见,我尝试了内容拉伸(stretch)和元素拉伸(stretch)。两者都不起作用。
最佳答案
列高填充行bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">card 1</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="btn btn-primary">download</a>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">card 1</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">download</a>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">card 1</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>
<a href="#" class="btn btn-primary">download</a>
</div>
</div>
</div>
</div>
关于html - 使列高填充行 Bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56749325/