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

Question

I have a form in an application using Bootstrap 4. It renders as I want it to in all browsers, except Internet Explorer 11.

I have used Bootstrap's .form-inline class because according to the docs

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

. The screenshot below was taken from Chrome v80:

In Internet Explorer 11 it renders as follows.

The markup is as follows.

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

If I remove the .form-inline in Internet Explorer 11 using Developer Tools the layout is more usable but still broken.

I read inline-flex input element breaks to new line in IE11 and tried swapping my .row with a .container . This seems to help but it centres the form and therefore doesn't look as I want in other (non IE 11) browsers. It also makes the input fields look much longer than desired.

Surely it is possible to left align the form and have it all on one line?

What is the problem with this and how can I fix it for IE 11 in a way that won't break it for other browsers? I want to render it as per the first screenshot, consistently in all browsers.

Answer 1

I compared with the official demo which can work well in IE 11, it seems that the issue is with <div class="col"> . The elements in the form are not wrapped by div .col in the official demo. I removed them and it can work well in IE 11 and other browsers.

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>