У меня есть форма в приложении, использующая Bootstrap 4. Она отображается так, как я хочу, во всех браузерах, кроме Inte rnet Explorer 11.
Я использовал Bootstrap 's * Класс 1003 *, поскольку в соответствии с документами
Используйте класс .form-inline для отображения серии меток, элементов управления формой и кнопок в одной горизонтальной строке.
Правильный рендеринг формы выглядит следующим образом . Приведенный ниже снимок экрана взят из Chrome v80:
В Inte rnet 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>
Если я удаляю .form-inline в Inte rnet Explorer 11 с помощью Инструментов разработчика, макет будет более пригодный для использования, но все еще неработающий.
Я прочитал элемент ввода inline-flex inline переходит на новую строку в IE11 и попытался поменять мой .row с .container. Это, кажется, помогает, но центрирует форму и поэтому не выглядит так, как я хочу в других (не IE 11) браузерах. Кроме того, поля input выглядят намного длиннее, чем хотелось бы.
Конечно, можно выровнять форму по левому краю и разместить все на одном line?
В чем проблема с этим, и как я могу исправить это для IE 11 таким образом, чтобы это не сломало его для других браузеров? Я хочу отобразить его согласно первому скриншоту, последовательно во всех браузерах.