Bootstrap flexbox，2 行，1 列布局和对齐内容

Posted 2023-03-05

【中文标题】Bootstrap flexbox，2 行，1 列布局和对齐内容

【英文标题】：Bootstrap flexbox, 2 row, 1 column layout and align contents

【发布时间】：2021-08-29 10:25:56

【问题描述】：

我想要一个全宽的 2 行“1 列”布局，占据整个视口。顶行的内容应位于该行的底部，底行的内容应位于该行的顶部。

使用引导程序中的一些示例，我能够做到这一点：https://codepen.io/afagard/pen/QWpJWze

但是，我不确定我是否正确地执行了操作，即使它看起来像预期的那样。具体来说，我尝试将容器设置为100vh，但这并没有导致弹性盒发生任何变化，因此我将每一行设置为50vh。我主要做后端工作，并且正在尝试学习 flexbox。

【问题讨论】：

当你说“我试图将容器设置为 100vh 但没有导致弹性盒发生任何变化”时，我不确定你的意思。这应该有什么不同？

根据您的问题，这对我来说看起来非常好。虽然我不认为列和行是真正需要的，因为您只使用 1 列。只能将 2 个 div 堆叠在一起

@Spectric 如果我只是将容器设为 100vh，则行不会变为 50vh。但我想我应该把行设为height:50%，这样就可以了。

@RichardHpa 使用引导网格？并获得与所示相同的行内容对齐方式？

你能画出你真正想要实现的目标吗？

【参考方案1】：

这是一个仅使用引导类而不使用其他 css 的 flexbox 解决方案示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<div class="container-fluid p-0 vh-100 d-flex flex-column text-center">
  
  <div class="flex-grow-1 d-flex flex-column bg-primary">
    <div class="mt-auto">
      Top half
    </div>
  </div>
  
  <div class="flex-grow-1 d-flex flex-column bg-secondary">
    <div class="mb-auto">
      Bottom half
    </div>
  </div>
  
</div>