将模式放在所有分辨率的底部

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 应该可以帮助您修复 window.

底部的模式

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

将模式放在所有分辨率的底部

Placing the modal at the bottom for all resolutions

html

css

modal-dialog

react-bootstrap

react-bootstrap4-modal