【问题标题】: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

【问题讨论】:

标签: 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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-08-31
    • 2018-12-20
    • 2018-05-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-15
    • 1970-01-01
    相关资源
    最近更新 更多