容器流体中的d-flex类，使其中的h1变小

Question

我是该领域的新手，所以希望我的问题能正确书写。在使用容器流体时，其中的项目应位于页面的垂直中心。这些项目是一个h1标签（带有背景色）和一个按钮，我还使用了行和列。因此，在我上的课程中，老师使用flex-box将项目与页面的垂直中心对齐，但是每当我将“ d-flex”类用于容器流体时，h1的背景较小，不会像以前那样占用页面的整个宽度。

这是代码：

<div class="container-fluid align-items-center h-100 d-flex">
    <div class="row">
        <div class="col-12">
            <header class="text-center">
                <h1><strong>Your Bast Working Environment</strong></h1>
            </header>
        </div>
        <div class="col-12">
            <section class="text-center">
                <button class="btn btn-primary btn-xl">Click Here For More Info</button>
            </section>
        </div>
    </div>
</div>

This is the picture was the container-fluid has a "d-flex" class and the h1 background doesn't taking the full width of the page

Answer 1

您需要告诉<header>标签宽度为100％。在Bootstrap中，这看起来像：

<div class="container-fluid align-items-center h-100 d-flex">
    <div class="row">
        <div class="col-12">
            <header class="text-center w-100">
                <h1><strong>Your Bast Working Environment</strong></h1>
            </header>
        </div>
        <div class="col-12">
            <section class="text-center">
                <button class="btn btn-primary btn-xl">Click Here For More Info</button>
            </section>
        </div>
    </div>
</div>