Nextjs的react-bootstrap模式没有在页面顶部打开

Question

在我的nextjs项目中，我一直在尝试实现一个Bootstrap Modal作为一个组件，类似于这个垂直居中的代码示例。

项目结构:

components 
- modal.js
pages
- index.js
- about.js

从index.js我调用模态组件:

<Button variant="primary" onClick={() => setModalShow(true)}>
Launch vertically centered modal
</Button>
<ModalMailingList show={modalShow} onHide={() => setModalShow(false)} />

这导致模态NOT在页面顶部的窗口中打开，而不是将模态切换为页面内的div。

下面是不想要的行为的工作代码。

我如何实现一个模态组件，并使它打开在页面的顶部?(如原始的react-bootstrap代码示例)

解决方案更新:

必须添加bootstrap.css到pages/_document.js

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>

Answer 1

解决方案:

必须将bootstrap.css添加到pages/_document.js

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>