Question

我正在使用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>

Answer 1

您可以使用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>

我如何在中心设置reactstrap模态标题的内容？

1 个答案: