将所有分辨率的模式置于底部

Question

我在我的项目中使用react-bootstrap模态。我需要将模式放在所有决议的底部。例如，可以通过在1080x1920分辨率下将css bottom属性更改为-74％来将模式置于底部。但是对于其他设备则不一样。

<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" style="display: block; padding-left: 0px;">
   <div role="document" class="modal-dialog sc-modal">
      <div class="modal-content">...
      </div>
   </div>
</div>



.sc-modal{
    width:100% !important; 
    top: unset;
    bottom:0%;
    max-width: 1080px;
    left: 50%;
    transform: translate(-50%, 0) !important;
}

如何将模态置于所有设备分辨率的底部？

Answer 1

[position应该可以帮助您固定窗口底部的模态。

.modal.in .modal-dialog {
   position: fixed;       
   bottom: 0;
   left: 50%;
   transform: translate(-50%);
}