如何在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

From react-bootstrap docs: 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>
</>
);
}