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

问题描述 投票:-1回答:1

我使用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类?

html twitter-bootstrap forms internet-explorer microsoft-edge
1个回答
0
投票

我已经测试了你的代码,表格显示在最新的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>

the result in IE and Edge

© www.soinside.com 2019 - 2024. All rights reserved.