如何添加滚动到react-bootstrap Modal.Body

Question

我正在使用react-bootstrap modal。

如何才能仅滚动主体而不是整个页面？

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body>One fine body...</Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

Answer 1

感谢Amit answer。

找到解决方案：

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body style={{'max-height': 'calc(100vh - 210px)', 'overflow-y': 'auto'}}>One fine body...</Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

Answer 2

您可以像这样将scrallable添加到Modal标记

<Modal scrollable={true} >
</Modal>

您可以在此处详细了解：https://react-bootstrap.netlify.app/components/modal/#modals