无法使用引导程序中的"align-items-center"垂直对齐

Question

我是Bootstrap和React JS的新手，我正在尝试将我的应用程序垂直和水平放置在中心。目前，这个应用程序只是水平放置的，它似乎连接到顶部。

function App() {
return (
<GlobalContextProvider>
<div className="container">
<div className="row justify-content-center align-items-center"> // <--- Doens't work
<div className="col">
<Header />
<Main />
<Footer />
</div>
</div>
</div>
</GlobalContextProvider>
);
}

我尝试过不同的方法，比如我的auto、lightself-center和其他方法，但出于某种原因，似乎什么都不起作用。你能帮我做这个吗(不用自定义css(？

Answer 1

align items center align cols，所以你需要为你想要对齐的每一块内容使用一个col，但你不应该为页眉、主标签和页脚标签使用cols