这是我的代码:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class="p-1 vw-100 vh-100">
<div class="container-fluid h-100 border border-primary p-1">
<div class="row border border-danger h-60 p-1 no-gutters">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-0">
Upper
</div>
</div>
<div class="row h-40 p-1 no-gutters">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 p-1">
Lower 1
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 p-1">
<div class="btn-group-toggle" data-toggle="buttons">
Lower 2
</div>
</div>
</div>
</div>
</body>
我在第一行添加了 h-60 类。 为什么第一行没有延伸到视口高度的 60%?
如何解决这些问题?
我运行了您的代码,是的,它不适用于 h-60,因为引导程序的大小属性以 25 的倍数给出,即 (25,50,75,100(,这适用于宽度和高度
参考:- https://getbootstrap.com/docs/4.0/utilities/sizing/
<div class="row border border-danger h-50 p-1 no-gutters">
进行上述更正,它将正常工作。