如何将 Bootstrap 5 用于典型的主页布局而不是 CSS？

Question

CodePen https://codepen.io/david263/pen/zYNaoRQ 显示了一个简单的主页布局示例，它完全适合浏览器视口并居中一些 div 内容（在 CodePen 中选择“更改视图”>“完整页面视图”以清楚地查看页面）。但请注意用于设置 div 高度的 CSS 样式元素和用于实现垂直居中的许多 Bootstrap 5 类。花了几天时间才开始工作，但它无法仅使用简单的 Bootstrap 5 类.

<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
        <div class="row col-12 text-center text-light">
            <h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
            <h3 class="font-weight-bold">A great starter layout for a landing page</h3>
        </div>
</header>

我尝试使用常用的容器、行和列类（请参阅 https://codepen.io/david263/full/xxgzLPj）未能达到第一个示例演示的完整高度。

<header id=jumbo class="container-fluid bg-dark">
    <div class="h-50 row align-items-center col-12 text-center text-light">
        <div class="col py-auto">
            <h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
            <h3 class="font-weight-bold">A great starter layout for a landing page</h3>
        </div>
    </div>
</header>

而且在添加背景图片之前遇到了这些困难，这在 Bootstrap 5 中似乎根本不可能。

不要误会我的意思；我不反对在必要时使用 CSS。只是很难确切地说出 Bootstrap 5 的限制是什么，因此自定义 CSS 变得有必要。

许多网站的主页都有一个包含大照片或视频的背景，文本在前景中水平和垂直居中，所以这个例子代表了一些经常使用的东西。 Bootstrap 5.

肯定可以这么频繁的布局

Answer 1

Bootstrap 不是灵丹妙药 - 它是一个框架（将其视为您需要在其上构建的底盘）。 Bootstrap 提供了一些“助手”classes，这样就不需要添加一大堆重复的 CSS .. 但它只能做这些了。清楚地理解 CSS 对使用 Bootstrap 也有很大帮助。

例如h-50class在CSS中只有height: 50%;。那是它父级的 50% .. 但是你的 <header id="jumbo" 没有高度 .. 所以 50% 的.. 0 .. 是 unknown？ （这可能因浏览器而异）

尚不清楚您要实现的目标 - 但如果您继续阅读 https://getbootstrap.com/docs/5.0/examples/ you'll see a whole bunch of examples and starting points for you to get to where you need to be. I think the Cover 示例是一个很好的着陆点。 （在那里，右键单击并“查看页面源代码”...）

如何将 Bootstrap 5 用于典型的主页布局而不是 CSS？

How to use Bootstrap 5 for a typical home page layout instead of CSS?

bootstrap-5