如何集中反应引导模态？

Question

我正在使用react引导模式，并试图将其定位为中心化，目前我正在指定该模型的width，然后将modal-dialog类上的页边距设置为285px !important，这似乎是可行的。但是，当屏幕大小低于xl大小时，应该是100px。

这是指向码页的链接。

我的CSS看起来如下：-

 .modal-content {
   width: 1200px  
   }
 .modal-dialog {
   margin-left: 285px !important  
   }
  @media screen and (max-width: 1000px) {
 .modal-dialog {
    margin-left: 100px !important
  }
}

显然，媒体查询似乎不起作用。还是有一种方法可以将模态设置为始终居中，而不考虑屏幕大小

Answer 1

如果你使用flex，那是小菜一碟：

div.fade.in.modal {
  display:flex !important;
}

.modal-dialog {
  margin: auto;
}

这将始终是垂直和水平的中心。

Answer 2

您只需在Modal中添加属性center即可。例如：

<Modal
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
......
</Modal>

此外，您还可以阅读文档https://react-bootstrap.github.io/components/modal/#modal-vertically-centered

我希望我的回答能帮到你。

Answer 3

在引导文档中，有不同的样式选项可供选择。但特别是，这应该能解决你的问题；

   <Modal
  {...props}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
  <Modal.Header closeButton>
    <Modal.Title id="contained-modal-title-vcenter">
      Modal heading
    </Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <h4>Centered Modal</h4>
    <p>
      Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
      dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
      consectetur ac, vestibulum at eros.
    </p>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={props.onHide}>Close</Button>
  </Modal.Footer>
</Modal>