如何调整模态反应引导的宽度?

Question

所以我试图详细了解react-bootstrap模态，在react-bootstrap模态文档中，我们能够根据css调整模态大小。我试着把代码复制到我的web应用程序，但它没有工作，如何解决这个问题?

下面是我的代码:

import {Navbar, Nav, Button, Modal, Row, Col} from 'react-bootstrap'
import {useState} from 'react'
import {Link} from 'react-router-dom'
import '../CSS/Header.css'
const Header = () => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Navbar className="MainHeader" expand="lg" variant="dark">
<Navbar.Brand className="Headerlogo" as={Link} to={"/"}>
<img src="/Images/logowhite.png" alt="hotel_logo"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="Headerlist justify-content-end fontReg">
<Nav>
<Button onClick={handleShow}>Book Now</Button>
</Nav>
</Navbar.Collapse>
</Navbar>
<Modal 
show={show} 
onHide={handleClose} 
animation={false} 
contentClassName="transparentBgClass"
dialogClassName="modal-90w"
aria-labelledby="example-custom-modal-styling-title"
>
<Modal.Header closeButton>
<Modal.Title id="example-custom-modal-styling-title">
Width 90% modal tutorial
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
commodi aspernatur enim, consectetur. Cumque deleniti temporibus
ipsam atque a dolores quisquam quisquam adipisci possimus
laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
deleniti rem!
</p>
</Modal.Body>
</Modal>
</>
)
}

CSS代码:

.modal-90w{
width: 90%;
}

Answer 1

如果你的模态仍然显示太小，你需要添加max-width: none !important;到你的CSS，因为Bootstrap默认为max-width: 500px;。