bootstrap4中删格布局如何让两列高度不一致?
发布网友
发布时间：2022-04-23 08:52
共3个回答
热心网友
时间：2022-05-13 10:12
b4造成这个现象的原因是row默认不指定align-items这个样式, 而该样式不指定默认为stretch(拉伸), 因此当第一列将row撑高后, 第二列也会被拉伸, 这种情况给row指定下align-item可以解决, 使用b4的align-item-start/center/end类即可:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Demo b4 align item</title>
<meta name="author" content="sleest" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<div class="container p-5" style="width: 50vw">
<div class="row bg-light py-5 align-items-start" >
<div class="col bg-white p-3 border">
<button class="btn btn-block btn-primary" type="button" data-toggle="collapse" href="#content1">Button 1</button>
<hr>
<div id="content1">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
<div class="col bg-white p-3 border">
<button class="btn btn-block btn-primary" type="button" data-toggle="collapse" href="#content2">Button 2</button>
<hr>
<div id="content2">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
</body>
</html>
结果:
热心网友
时间：2022-05-13 11:30
好像可以自定义来控制某列,,,好久没写前端了,,,,
热心网友
时间：2022-05-13 13:05
代码呢？。。。。
