Размещение модала внизу для всех разрешений - PullRequest
Новая
       11

Размещение модала внизу для всех разрешений

0 голосов
/ 17 февраля 2020

Я использую реагирующую bootstrap модальную в моем проекте. Мне нужно разместить модал внизу всех разрешений. Например, я могу разместить модал внизу, изменив свойство css bottom на -74% в разрешениях 1080x1920. Но для других устройств это не то же самое. 

<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;
}

Как разместить модал внизу для всех разрешений устройства?

1 Ответ

0 голосов
/ 17 февраля 2020

position должен помочь вам исправить модальное состояние в нижней части окна. 

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