如何解决如何在Bootstrap4中设置列的高度
如何将各列的高度设置为相同,例如各列之间有一个匹配项 这是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>
解决方法
使用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>
请尝试
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。