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

Question

我正在使用react-bootstrap模式.

我怎样才能让身体只滚动而不是整个页面？

  <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的回答.

找到解决方案

  <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

您可以像这样将可滚动添加到 Modal 标签

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

你可以在这里获得详细信息：https : //react-bootstrap.netlify.app/components/modal/#modals