我正在使用 reactstrap Modal,有一个 ModalHeader,我在其中显示我的内容。但是当我试图将该内容放在页眉中心时,我遇到了这个问题。
检查元素后,我在 ModalHeader 中发现有 <h5>
标签,在这个标签里面我的内容来了,我检查了<h5>
标签没有使用 Modal-Header 的整个宽度。我认为因为它没有出现在中心。如果有人知道 reactstrap Modal,请指导我如何将我的 Modal-Header 内容放在中心。提前致谢。
这是我的示例代码。
<ModalHeader toggle={props.toggle} >
<div className="d-flex justify-content-center mb-2">
<img src={myImg} alt="img" className="imgSize" />
</div>
<div className="d-flex justify-content-center">
<p>Hi <b>John -</b> here is my some text</p>
</div>
</ModalHeader>
最佳答案
您可以使用 cssModule 属性将 className 添加到 h2 标签。添加 w-100 text-center
为我解决了这个问题
<ModalHeader toggle={props.toggle} cssModule={{'modal-title': 'w-100 text-center'}}>
<div className="d-flex justify-content-center mb-2">
<img src={myImg} alt="img" className="imgSize" />
</div>
<div className="d-flex justify-content-center">
<p>Hi <b>John -</b> here is my some text</p>
</div>
</ModalHeader>
关于reactjs - 如何在中心设置 reactstrap modal-header 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54597870/