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