使用Bootstrap，如何在一行中添加两个标题元素

Question

由于某种原因，我能够在当天早些时候实现我想要的，但现在当我试图重新创建代码时，它无法复制。

我想要两个标题元素h2和h3，在jumbotron部分的一个div行中居中对齐

然后，我想给h3元素添加下边距，使其稍微高于h2元素，就像照片中一样

我仍然有我的原始代码，但即使在复制了具有相同样式的确切代码之后，h3元素最终也直接位于h2之下。

我尝试过使用dev工具进行交叉引用，发现唯一的区别是包含h2和h3元素的div行缺少display:flex，但它仍然不起作用。

我想发生什么

发生了什么

原始工作代码：

HTML:
<section class="jumbotron">
<div class="container">
<div class="row">
<h2>Jumbotron</h2>
<h3>Bootstrap</h3>
</div>
</div>
</section>
CSS:
.jumbotron {
display: flex;
align-items: center;
background-image: url('https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80');
background-size: cover;
color: #ffffff;
height: 400px;
}
.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: ;
}
.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}

谢谢你的帮助！

Answer 1

使用类似d-flex的更改行类

<section class="jumbotron">
<div class="container">
<div class="d-flex">
<h2>Jumbotron</h2>
<h3>Bootstrap</h3>
</div>
</div>
</section>