如何在 bootstrap 5 中获得一个简单的 3 堆叠列布局为 100vh

Question

我今天捡了Bootstrap5个

我无法将 box-1、box-2 和 box-3 叠放在一起占用 100vh

我粘贴了下面代码的编辑版本，它实际上是三个盒子堆叠在一起。我可以在 CSS Grid 和 Flexbox 中执行此操作，但不能使用 Bootstrap.

以下是我已经尝试过但没有奏效的方法：

将 body 和 html 设置为高度：100vh
将容器设置为高度 100vh - 这使得每个盒子 100vh 或 box-1 占用 100vh，box-2 溢出到另一个 100vh，同样 box-3
在正文内容周围制作一个包装器 class 并将其设置为高度 100vh
使用实用工具 class vh-100

有什么建议吗？

谢谢

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

Answer 1

在我看来你可以大大简化这个。如果每个容器只有一个，我不确定为什么你需要行或列。您似乎甚至不需要一个以上的容器。根据 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 class 移到行中（并且只使用一个容器）。效果一样。

/* 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>

如何在 bootstrap 5 中获得一个简单的 3 堆叠列布局为 100vh

How can I get a simple 3 stacked column layout in bootstrap 5 to be 100vh

html

css

flexbox

twitter-bootstrap

bootstrap-5