我有以下代码与8引导行元素。我希望它们具有相等的高度，这样所有行的组合高度等于屏幕高度，这样所有的行总是可见的，而不需要滚动。我尝试设置h-100/50/25等每一行的高度，这是有效的，但行溢出页面。设置自定义h-不起作用。我怎样才能做到这一点呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal rows</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="container-fluid vh-100">
<div class="row">
<div class="col-lg" style="background-color: lightcoral;">
<h3 style="color: white">lightcoral</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: indigo;">
<h3 style="color: white">indigo</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: red;">
<h3 style="color: white">red</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: lightseagreen;">
<h3 style="color: white">lightseagreen</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: green;">
<h3 style="color: white">green</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: yellow;">
<h3 style="color: white">yellow</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: purple;">
<h3 style="color: white">purple</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: orange;">
<h3 style="color: white">orange</h3>
</div>
</div>
</div>
</body>
</html>不需要把它们都放在单独的rows中。
将它们嵌套在一起，使用.h-100和flex-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal rows</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="container-fluid vh-100">
<div class="row h-100 flex-column flex-nowrap">
<div class="col-lg col" style="background-color: lightcoral;">
<h3 style="color: white">lightcoral</h3>
</div>
<div class="col-lg col" style="background-color: indigo;">
<h3 style="color: white">indigo</h3>
</div>
<div class="col-lg col" style="background-color: red;">
<h3 style="color: white">red</h3>
</div>
<div class="col-lg col" style="background-color: lightseagreen;">
<h3 style="color: white">lightseagreen</h3>
</div>
<div class="col-lg col" style="background-color: green;">
<h3 style="color: white">green</h3>
</div>
<div class="col-lg col" style="background-color: yellow;">
<h3 style="color: white">yellow</h3>
</div>
<div class="col-lg col" style="background-color: purple;">
<h3 style="color: white">purple</h3>
</div>
<div class="col-lg col" style="background-color: orange;">
<h3 style="color: white">orange</h3>
</div>
</div>
</div>
</body>
</html>