代码之家 › 专栏 › 技术社区 › The KNVB

如何以60%的观察孔高度排成一行?

bootstrap-4

0

The KNVB · 技术社区 · 6 年前

这是我的代码:

<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%?

如何解决这些问题?

1 回复 | 直到 6 年前

1

0

VR7 6 年前

我运行了你的代码,是的,它不会在h-60上工作,因为引导的大小属性是25的倍数,即(25,50,75100),这适用于宽度和高度

参考:- https://getbootstrap.com/docs/4.0/utilities/sizing/

<div class="row border border-danger h-50 p-1 no-gutters">

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