Bootstrap 4 模态样式（FlexBox）在 IE 中不起作用答案

【问题标题】：Bootstrap 4 Modal styling (FlexBox) not working in IEBootstrap 4 模态样式（FlexBox）在 IE 中不起作用
【发布时间】：2019-07-08 03:05:39
【问题描述】：

我正在使用 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

为此创建了fiddle。

【问题讨论】：

stackoverflow.com/questions/18019450/…的可能重复

标签： css reactjs internet-explorer flexbox bootstrap-4

【解决方案1】：

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

【讨论】：

我不确定当你想以其他方式绘制它们时，你为什么要在 HTML 中以相反的顺序保持是/否 div。所以我改变了他们在 HTML 中的位置。所以你现在不需要 order-* 属性。

【解决方案2】：

在 IE 中不完全支持 display flex。我将页脚显示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>

【讨论】：