form-inline类的bootstrap 4在IE和Edge中显示两行控件

Question

我使用bootstrap 4在html中使用了以下标记，它在单行中显示，而在IE Edge中它被分成两个

<form class="form-inline" style="margin-top:10px;">
<label for="text" class="mr-sm-2">HOUR</label>
input type="text" class="form-control mb-2 mr-sm-2" id="HOUR">
<label for="text" class="mr-sm-2">MINUTE</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="MINUTE">
<label for="text" class="mr-sm-2">SECONDS</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="SECONDS">

<div class="dropdown" style="margin-left:20px;">
<button type="button" id="AMPM" class="btn btn-primary dropdown-toggle" style="width:160px;" data-toggle="dropdown">
                    AM/PM
</button>
<div class="dropdown-menu" id="SelectAMPM">
<a class="dropdown-item" href="#">AM</a>
<a class="dropdown-item" href="#">PM</a>
</div>
</div>
</form>

如何在Internet Explorer和Edge中一行显示整个表单？需要添加什么bootstrap 4类？

Answer 1

我已经测试了你的代码，表格显示在最新的Edge和IE中。

我想知道你曾经用过什么版本的IE / Edge来显示两行。

此外，我想告诉你，当你使用内联属性时，由于没有足够的空间/宽度，字段从水平变为垂直。你可以从链接中看到这个：https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

我已经使用类form-control修改了部分样式。也许你可以参考。

<form class="form-inline">
    <div class="form-group">
        <label for="text">HOUR</label>
        <input id="HOUR" class="form-control input-group-lg" type="text" />
    </div>
    <div class="form-group">
        <label for="text">MINUTE</label>
        <input id="MINUTE" class="form-control input-group-lg" type="text" />
    </div>
    <div class="form-group">
        <label for="text">SECONDS</label>
        <input id="SECONDS" class="form-control input-group-lg" type="text" />
    </div>
    <div class="form-group">
        <div class="dropdown" style="margin-left:20px;">
            <button type="button" id="AMPM" class="btn btn-primary dropdown-toggle" style="width:160px;" data-toggle="dropdown">
                AM/PM
            </button>
            <div class="dropdown-menu" id="SelectAMPM">
                <a class="dropdown-item" href="#">AM</a>
                <a class="dropdown-item" href="#">PM</a>
            </div>
        </div>
    </div>
</form>