Bootstrap 4 Модальный стиль (FlexBox) не работает в IE

Question

Я создаю диалоговое окно подтверждения, используя bootstrap 4, и код выглядит следующим образом

<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Confirm Navigation</h4>
         </div>
         <div class="modal-body">
            <p>You haven't saved your changes. Are you sure you want to leave this page?</p>
         </div>
         <div class="modal-footer">
            <div class="order-2"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
            <div class="mr-auto order-1"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
            <div class="clearfix"></div>
         </div>
      </div>
   </div>
</div>

Стиль работает нормально в chrome, firefox, edge, но не работает в IE

Хром

IE11

Создано скрипка для того же.

Может кто-нибудь, пожалуйста, помогите мне с этим.

Answer 1

Попробуйте следующую структуру HTML для "modal-footer"

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Confirm Navigation</h4>
      </div>
      <div class="modal-body">
        <p>You haven't saved your changes. Are you sure you want to leave this page?</p>
      </div>
      <div class="modal-footer justify-content-start">
        <button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button>
        <button class="ml-auto btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

display flex не полная поддержка в IE.я изменяю отображение нижнего колонтитула flex на block, затем его работа.проверьте код ниже

<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Confirm Navigation</h4>
         </div>
         <div class="modal-body">
            <p>You haven't saved your changes. Are you sure you want to leave this page?</p>
         </div>
         <div class="modal-footer d-block">
            <div class="row">
               <div class="col-sm-6"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
               <div class="col-sm-6 text-right"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
            </div>
            <div class="clearfix"></div>
         </div>
      </div>
   </div>
</div>