min-vh-50 在 Bootstrap CSS 中的行为不符合预期

Question

我要做两行。这些行内部有按钮（每行 10 个）。我希望这两行位于页面中间，但不要太靠近。

我在这两行上应用了

min-vh-50

，将它们对齐到中上和中下。两行都是同一个容器的一部分。但是，行不会移动，只是堆叠在页面顶部的每一行上。它们仅在我应用

min-vh-100

时才会移动，但我希望它们仅适合同一页面。 这是我的代码（我刚刚包含了一些示例按钮）-

  <div class="container-fluid">
    <div class="row d-flex justify-content-center align-items-center min-vh-50">
      <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">
      <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>

您能给我一个解决方案并解释为什么会发生这种情况吗？

Answer 1

尝试将容器流体高度更改为 100