我怎样才能让第一行在顶部，第二行垂直居中？

Question

我正在使用 Bootstrap 5，我试图让第一行位于页面顶部，让第二行占据视口的其余部分并使其内容垂直居中没有滚动条（假设视口足够高）。这是基本代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container min-vh-100">
  <div class="row">
    <div class="col-12 col-md-2">
      Content
    </div>
    <div class="col-12 col-md-10">
      Content
    </div>
  </div>

  <div class="row min-vh-100 align-items-center">
    <div class="col-12 col-lg-6">
      Content
    </div>
    <div class="col-12 col-lg-6">
      Content
    </div>
  </div>
</div>

第二行确实正确地将其内容居中，但是，因为我使用的是 min-vh-100 class 它会产生滚动条（删除第一行会使滚动条按预期消失） .将第二行的 min-vh-100 更改为 h-100 class 无济于事（实际上会使事情变得更糟）。问题似乎是如何告诉第二行占据父级剩余高度的 100% 而不是视口高度的 100%。

Answer 1

您的容器需要 d-flex 和 flex-column 类。然后，不要在第二行强制高度，而是使用 flex-fill 让它使用剩余的 space。固定大小应该是最后的手段。

见https://getbootstrap.com/docs/5.0/utilities/flex。

.row:first-child {
  background: thistle;
}

.row:last-child {
  background: moccasin;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container min-vh-100 d-flex flex-column">
  <div class="row">
    <div class="col-2">
      Content
    </div>
    <div class="col-10">
      Content
    </div>
  </div>

  <div class="row flex-fill align-items-center">
    <div class="col-6">
      Content
    </div>
    <div class="col-6">
      Content
    </div>
  </div>
</div>

我怎样才能让第一行在顶部，第二行垂直居中？

How can I have the first row at the top and the second row vertically centered?

html

css

twitter-bootstrap

vertical-alignment