英文:
How to fill page height with equal height rows in bootstrap
问题
以下是翻译好的部分，代码部分不翻译：
我有以下代码，其中包含 8 个 Bootstrap 行元素。我希望它们的高度相等，以便所有行的总高度等于屏幕高度，并且所有行始终可见，无需滚动。我尝试为每行设置高度为 h-100/50/25 等，但这会导致行溢出页面。设置自定义的 h-<height> 不起作用。我该如何实现这一目标？
英文:
I have the following code with 8 bootstrap row elements. I'd like them to have equal height such that the combined height of all rows is equal to the screen height and such that all the rows are always visible without scrolling. I tried setting the height for each row with h-100/50/25 etc and that works but the rows overflow the page. Setting a custom h-<height> does not work. How can I achieve this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
不需要将它们都分开放在不同的“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>
英文:
No need to put them all in separate rows.
Nest them all in one and use .h-100 with flex-column
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论