如何调整模态反应的宽度-bootstrap？

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

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

如何调整模态反应的宽度-bootstrap？

How to resize the width of modal react-bootstrap?

html

javascript

css

reactjs

react-bootstrap