【问题标题】:How to Resize Modal height and width in react-bootstrap?如何在 react-bootstrap 中调整模态高度和宽度?
【发布时间】:2023-01-17 22:08:35
【问题描述】:

我正在尝试在我的应用程序中使用 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;
}

【问题讨论】:

    标签: css bootstrap-modal bootstrap-5 react-bootstrap


    【解决方案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>
        </>
      );
    }
    

    【讨论】:

    • 我认为 lg 不足以满足我的需求
    • @KimSan,进一步阅读全屏、响应式和自定义大小的链接。
    猜你喜欢
    • 2019-01-27
    • 1970-01-01
    • 2018-10-30
    • 2011-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-05
    • 1970-01-01
    相关资源
    最近更新 更多