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

Question

我在使用Bootstrap 4的应用程序中有一个表单。它可以在所有浏览器中呈现所需的外观，但Internet Explorer 11除外。

我根据.form-inline使用了Bootstrap的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修复它？我想按照第一个屏幕截图在所有浏览器中一致地渲染它。

Answer 1

我与official demo相比，后者在IE 11中可以很好地工作，看来问题出在<div class="col">。表格中的元素在官方演示中并未由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>