Bootstrap 5 和垂直定位答案

【问题标题】：Bootstrap 5 and vertical positioningBootstrap 5 和垂直定位
【发布时间】：2021-07-12 11:47:37
【问题描述】：

我正在使用 Bootstrap 5 的 flexbox 网格来设计一个响应式移动优先的 Angular Web 应用程序。

我希望我的应用程序的主屏幕包含以下 3 个元素：

屏幕顶部的应用名称
屏幕中间有一排按钮
屏幕底部的页脚

将这些元素分别放置在屏幕的顶部、中间和底部，同时保持它们水平居中的最佳响应方式是什么。

我现在的代码是这样的：

<div class="container-fluid">
<div class="row">
    <div class="col-12 d-flex justify-content-center">
        <h1>App name</h1>
    </div>
</div>
<div class="row">
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">First button</button>
    </div>
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
    </div>
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
    </div>
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
    </div>
</div>
<div class="row">
    <div class="col-12 d-flex justify-content-center">
        <p>Footer</p>
    </div>
</div>

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap frontend bootstrap-5

【解决方案1】：

与任何 flexbox vertical alignment in Bootstrap 的方式相同。例如，flexbox 容器中的自动边距...

<div class="container-fluid vh-100 d-flex flex-column">
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <h1>App name</h1>
        </div>
    </div>
    <div class="row my-auto">
        <div class="col-12 col-sm-6 col-lg-3 d-flex">
            <button type="button" class="btn btn-outline-primary flex-fill">First button</button>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 d-flex">
            <button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 d-flex">
            <button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 d-flex">
            <button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
        </div>
    </div>
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <p>Footer</p>
        </div>
    </div>
</div>

Demo

【讨论】：