#reactjs #react-bootstrap
#reactjs #react-bootstrap
Вопрос:
Я пытаюсь реализовать React Modal для своего проекта. Я хочу центрировать модальный заголовок и модальную кнопку. Я пытался использовать flex и just-content-center, но это не сработало. Любые предложения были бы ценными.
<Modal show={modalShow} onHide={this.handleClose} aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Header closeButton>
<div className="d-flex justify-content-center">
<Modal.Title>{isVerified?"Submitted succesfully":"Failed to submit"}</Modal.Title>
</div>
</Modal.Header>
<Modal.Footer>
<Button variant={`${isVerified == false?"danger ":"success"}`} onClick={this.handleClose} centered>
{isVerified?"Ok":"Try again"}
</Button>
</Modal.Footer>
</Modal>
Ответ №1:
Я пробовал разные классы, но работает вот что:
import React from "react";
import { Modal, Button } from "react-bootstrap";
const ModalPage = ({ modalShow, handleClose, isVerified }) => {
return (
<Modal
show={modalShow}
onHide={handleClose}
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header
closeButton
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Modal.Title>
{isVerified ? "Submitted succesfully" : "Failed to submit"}
</Modal.Title>
</Modal.Header>
<Modal.Footer
style={{
display: "flex",
justifyContent: "center",
}}
>
<Button
variant={`${isVerified == false ? "danger " : "success"}`}
onClick={handleClose}
centered
>
{isVerified ? "Ok" : "Try again"}
</Button>
</Modal.Footer>
</Modal>
);
};
export default ModalPage;
Ответ №2:
Для центрирования заголовка заголовка и кнопки закрытия:
Если вы увеличите горизонтальное заполнение и используете ms-auto для заголовка, вы можете переместить кнопку закрытия в соответствующее место, сохранив текст заголовка по центру.
<Modal>
<Modal.Header className="px-4" closeButton>
<Modal.Title className="ms-auto">Title</Modal.Title>
</Modal.Header>
<Modal.Body>Body</Modal.Body>
</Modal>