Bootstrap 4 .form-inline 在 Internet Explorer 11 中不起作用答案

【问题标题】：Bootstrap 4 .form-inline not working in Internet Explorer 11Bootstrap 4 .form-inline 在 Internet Explorer 11 中不起作用
【发布时间】：2020-07-06 03:28:39
【问题描述】：

我在使用 Bootstrap 4 的应用程序中有一个表单。它可以在所有浏览器中按我想要的方式呈现，除了 Internet Explorer 11。

我使用了 Bootstrap 的 .form-inline 类，因为根据 docs

使用.form-inline 类在单个水平行上显示一系列标签、表单控件和按钮。

正确的表单呈现是这样的。下面的截图取自 Chrome v80：

在 Internet Explorer 11 中，它呈现如下。

标记如下。

<div class="row">
    <form method="get" class="form-inline" action="#"> 

        <div class="col">   
            <label for="date_start" class="mr-2 float-left">From</label>
            <div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
                <div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                </div>
                <input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">  
            </div>
        </div>

        <div class="col">
            <label for="date_end" class="mr-2 float-left">To</label>
            <div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
                <div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                </div>
                <input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">  
            </div>
        </div>

        <button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>

    </form>
</div>

如果我使用开发者工具在 Internet Explorer 11 中删除 .form-inline，布局会更有用，但仍然损坏。

我阅读了inline-flex input element breaks to new line in IE11 并尝试将我的.row 替换为.container。这似乎有帮助，但它使表单居中，因此在其他（非 IE 11）浏览器中看起来不像我想要的那样。它还使input 字段看起来比预期的要长得多。

确实可以将表单左对齐并将其全部放在一行上吗？

这有什么问题，我该如何在不破坏其他浏览器的情况下为 IE 11 修复它？我想在所有浏览器中始终按照第一个屏幕截图呈现它。

【问题讨论】：

标签： html css bootstrap-4 internet-explorer-11

【解决方案1】：

我对比了official demo 在 IE 11 中运行良好，看来问题出在<div class="col"> 上。表单中的元素在官方demo中没有被div .col包裹。我删除了它们，它可以在 IE 11 和其他浏览器中正常运行。

Online demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form method="get" class="form-inline" action="#">

  <label for="date_start" class="mr-2 float-left">From</label>
  <div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
    <div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
    <input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">
  </div>

  <label for="date_end" class="mr-2 float-left">To</label>
  <div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
    <div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
    <input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">
  </div>

  <button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>

</form>

【讨论】：