Bootstrap中min-vh-50样式未按预期生效的问题求助

问题背景 #

需要制作两个各包含10个按钮的row，要求分别位于页面上半中部和下半中部，且两者间距适中。为两个row添加min-vh-50类后，它们并未按预期分布，反而堆叠在页面顶部；仅当使用min-vh-100类时，单个row会移动到页面中部，但两个row无法在同一页面内合理展示。

问题原因 #

1. min-vh-50的作用逻辑：min-vh-50仅将元素的最小高度设置为视口高度的50%，它只约束元素自身高度，不会影响父容器的高度，也无法让多个row自动在视口中分配垂直空间。
2. 父容器无高度约束：外层的container-fluid默认没有设置高度，两个row作为块级元素会默认垂直堆叠，不会触发基于视口高度的布局。
3. min-vh-100的局限性：给单个row设置min-vh-100时，它会占满整个视口高度从而实现居中，但两个这样的row会超出视口范围，无法同时在页面内展示。

解决方案 #

方案一：利用Flex布局让父容器控制垂直分布（推荐） #

给外层container-fluid添加Flex布局相关类，让它占满视口高度并垂直分配两个row的空间，同时去掉row上的min-vh-50：

<div class="container-fluid d-flex flex-column justify-content-around min-vh-100">
  <div class="row d-flex justify-content-center align-items-center">
    <button class="btn btn-primary col-auto m-1">Primary</button>
    <button class="btn btn-secondary col-auto m-1">Secondary</button>
    <button class="btn btn-success col-auto m-1">Success</button>
    <button class="btn btn-danger col-auto m-1">Danger</button>
    <button class="btn btn-warning col-auto m-1">Warning</button>
    <button class="btn btn-info col-auto m-1">Info</button>
    <button class="btn btn-light col-auto m-1">Light</button>
    <button class="btn btn-dark col-auto m-1">Dark</button>
    <button class="btn btn-link col-auto m-1">Link</button>
    <button class="col-auto m-1">Normal</button>
  </div>

  <div class="row d-flex justify-content-center align-items-center">
    <button class="btn btn-outline-primary col-auto m-1">Primary</button>
    <button class="btn btn-outline-secondary col-auto m-1">Secondary</button>
    <button class="btn btn-outline-success col-auto m-1">Success</button>
    <button class="btn btn-outline-danger col-auto m-1">Danger</button>
    <button class="btn btn-outline-warning col-auto m-1">Warning</button>
    <button class="btn btn-outline-info col-auto m-1">Info</button>
    <button class="btn btn-outline-light col-auto m-1">Light</button>
    <button class="btn btn-outline-dark col-auto m-1">Dark</button>
    <button class="btn btn-link col-auto m-1">Link</button>
    <button class="col-auto m-1">Normal</button>
  </div>
</div>

• d-flex flex-column：将父容器设置为垂直方向的Flex布局
• justify-content-around：让两个row在垂直方向均匀分布，上下和中间都留有间距
• min-vh-100：让父容器占满整个视口高度

方案二：保留min-vh-50并调整间距 #

如果希望保留row的min-vh-50类，可给container-fluid设置min-vh-100，并通过mb-auto和mt-auto类让两个row分别对齐到上下区域：

<div class="container-fluid min-vh-100">
  <div class="row d-flex justify-content-center align-items-center min-vh-50 mb-auto">
    <button class="btn btn-primary col-auto m-1">Primary</button>
    <button class="btn btn-secondary col-auto m-1">Secondary</button>
    <button class="btn btn-success col-auto m-1">Success</button>
    <button class="btn btn-danger col-auto m-1">Danger</button>
    <button class="btn btn-warning col-auto m-1">Warning</button>
    <button class="btn btn-info col-auto m-1">Info</button>
    <button class="btn btn-light col-auto m-1">Light</button>
    <button class="btn btn-dark col-auto m-1">Dark</button>
    <button class="btn btn-link col-auto m-1">Link</button>
    <button class="col-auto m-1">Normal</button>
  </div>

  <div class="row d-flex justify-content-center align-items-center min-vh-50 mt-auto">
    <button class="btn btn-outline-primary col-auto m-1">Primary</button>
    <button class="btn btn-outline-secondary col-auto m-1">Secondary</button>
    <button class="btn btn-outline-success col-auto m-1">Success</button>
    <button class="btn btn-outline-danger col-auto m-1">Danger</button>
    <button class="btn btn-outline-warning col-auto m-1">Warning</button>
    <button class="btn btn-outline-info col-auto m-1">Info</button>
    <button class="btn btn-outline-light col-auto m-1">Light</button>
    <button class="btn btn-outline-dark col-auto m-1">Dark</button>
    <button class="btn btn-link col-auto m-1">Link</button>
    <button class="col-auto m-1">Normal</button>
  </div>
</div>

• mb-auto：让第一个row自动向下推，对齐到父容器顶部区域
• mt-auto：让第二个row自动向上推，对齐到父容器底部区域

内容的提问来源于stack exchange，提问作者user25478432