我在使用Bootstrap(Firefox浏览器)的表单上有一个选择控件,但它在右侧缺少箭头图标:
以下是我使用的相关HTML:
<div class="container-fluid">
<form id="form" method="post" action="process.php">
<div class="form-group">
<label class="lbl" for="choose">Choose</label>
<select class="form-control" id="choose" name="choose" required>
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
</select>
</div>
<input type="submit" name="button" value="Submit" class="btn-primary">
<input type="button" name="cancel" value="Cancel" class="btn-primary" onclick="clkcnc();">
</form>
</div>
这是我在这些元素上使用的唯一CSS:
body {
font-size: 20px;
}
.form-control {
padding-top: 6px;
}
.lbl {
padding-top: 6px;
}
当在窗体上使用Bootstrap时,我想使用form-control类使控件看起来像其他控件,但这个select控件看起来更像一个文本输入。
- 更新**
此问题与使用不同的分辨率有关(通过Firefox中的响应式设计模式)。分辨率是480 x 854。当我关闭该模式时,浏览器将在1600 x 900的屏幕分辨率内显示,选择控件将正常显示,右侧有箭头图标。不幸的是,我需要在一个狭窄的决议网页工作。以下是我的基本页面设置中的meta设置:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no">
下面是link2pk的结果:
1条答案
按热度按时间kb5ga3dv1#
1.升级到Bootstrap v5.2 +
1.如果使用Bootstrap v5,请尝试使用form-select而不是form-control(请参阅:https://getbootstrap.com/docs/5.0/forms/select/)