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中不工作

Chrome

IE11

为此创建了一个fiddle。

有人可以帮我吗？

Answer 1

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>

Answer 2

尝试为“ modal-footer”使用以下HTML结构

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