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

Question

所以我正在尝试详细了解 react-bootstrap 模态，在 React-Bootstrap Modal Documentation 上，我们能够根据 css 调整模态大小以适应我们的喜好。我尝试将代码复制到我的网络应用程序中，但它不起作用，如何解决这个问题？

这是我的代码：

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

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