如何在 react-bootstrap 中调整模态高度和宽度？

Question

我正在尝试在我的应用程序中使用 React Bootstrap Modal，但是对话框太小了，我想把它变大。我怎样才能做到这一点？我已经完成了代码，但我认为 css 不起作用

这是代码：

        <Modal show={showModal} onHide={handleClose} className='modalSize'>
            <Modal.Body >
                <Row>
                    <Col lg={6}>
                        <img 
                            className
                            src= {modalData.picture}
                        />
                    </Col>

                    <Col lg={6}>
                        <h1>{modalData.name}</h1>
                        <h1>{modalData.position}</h1>
                    </Col>
                </Row>

            </Modal.Body>
        </Modal>

CSS：

.modalSize{
    width: 100% !important;
}

Answer 1

来自 react-bootstrap 文档：Size

您可以使用 size="lg" 为模式的大小添加参数，如下所示

function Example() {
  const [smShow, setSmShow] = useState(false);
  const [lgShow, setLgShow] = useState(false);

  return (
    <>
      <Button onClick={() => setSmShow(true)} className="me-2">
        Small modal
      </Button>
      <Button onClick={() => setLgShow(true)}>Large modal</Button>
      <Modal
        size="sm"
        show={smShow}
        onHide={() => setSmShow(false)}
        aria-labelledby="example-modal-sizes-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-sm">
            Small Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>...</Modal.Body>
      </Modal>
      <Modal
        size="lg"
        show={lgShow}
        onHide={() => setLgShow(false)}
        aria-labelledby="example-modal-sizes-title-lg"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-lg">
            Large Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>...</Modal.Body>
      </Modal>
    </>
  );
}