如何在引导程序 5 中获得一个简单的 3 堆叠列布局为 100vh
Posted
技术标签:
【中文标题】如何在引导程序 5 中获得一个简单的 3 堆叠列布局为 100vh【英文标题】：How can I get a simple 3 stacked column layout in bootstrap 5 to be 100vh 【发布时间】：2022-01-15 10:13:59 【问题描述】：我今天拿起了 Bootstrap 5
我无法将 box-1、box-2 和 box-3 叠放在一起的 3 列布局需要 100vh
我在下面粘贴了一个经过编辑的代码版本，它实际上是三个堆叠在一起的盒子。我可以在 CSS Grid 和 Flexbox 中做到这一点，但不能使用 Bootstrap。
以下是我已经尝试过但没有奏效的方法：
-
将 body 和 html 设置为高度：100vh
将容器高度设置为 100vh - 这使得每个盒子 100vh 或盒子 1 占用 100vh，盒子 2 溢出到另一个 100vh，同样盒子 3
围绕正文内容创建一个包装类并将其设置为高度 100vh
使用实用程序类 vh-100 重复 1)-3)
有什么建议吗？
谢谢
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<section class="container box-1">
<div class="row">
<div class="col">
</div>
</div>
</section>
<section class="container box-2">
<div class="row">
<div class="col">
</div>
</section>
<section class="container box-3">
<div class="row">
<div class="col">
</div>
</div>
</section>
</body>【问题讨论】：
欢迎来到 SO。请务必拨打tour，以便您知道如何使用本网站。 【参考方案1】：在我看来，您可以大大简化这一点。如果每个容器只有一个，我不确定为什么需要行或列。您甚至似乎不需要超过一个容器。我们只是一个基本的 flex 列，每个 the docs。
/* all styles for demo only */
.d-flex
background: #eee;
.box-1:nth-child(even)
background: pink;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100 p-0">
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
</div>
</body>如果您确实需要容器和内部结构，只需将 flex-fill 类移到行中（并且只使用一个容器）。它的工作原理是一样的。
/* all styles for demo only */
.row
background: #eee;
.row:nth-child(even)
background: pink;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100">
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
</div>
</body>【讨论】：
以上是关于如何在引导程序 5 中获得一个简单的 3 堆叠列布局为 100vh的主要内容，如果未能解决你的问题，请参考以下文章