如何用视口高度的 60% 制作一行?



这是我的代码:

<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">

进行上述更正,它将正常工作。

最新更新