React 中的居中模态标题和按钮 Bootstrap

Question

我正在尝试为我的项目实施 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>

Answer 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;

Answer 2

要使 header 标题和关闭按钮居中：

如果您增加水平填充并在标题上使用 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>

React 中的居中模态标题和按钮 Bootstrap

Centering Modal Title and button in React Bootstrap

reactjs

react-bootstrap