我正在使用 Bootstrap 使用响应式设计创建表单。我的目标是让这样的输入在移动设备上成为 slider 类型,在中型设备和更大的设备上成为文本类型。
出于这个原因,我在两个 div 中使用不同的类来根据设备屏幕宽度显示和隐藏内容(例如 hidden-xs、hidden-sm、hidden-md、hidden-lg)。
<div class="form-group hidden-sm hidden-md hidden-lg">
<!-- input type slider for mobile devices -->
</div>
<div class="form-group hidden-xs">
<!-- input type text for wider screen devices -->
</div>
我的 css 文件中还有一个 @media
规则:
@media (min-width: 768px) {
.sm-view {
display: none;
}
}
@media (max-width: 767px) {
.lg-view {
display: none;
}
}
它按我的预期工作,除了 767px
的边界宽度值,在这个宽度上两个 div 都是可见的:
只有当我将宽度值增加到 768px
时, slider 才会隐藏,而当我将宽度值设置为 766px
时,输入字段会隐藏。
我做错了什么?
UPD 这是工作示例:https://jsfiddle.net/rnurxbw9/1/
此处的窗口宽度会有所不同,但您可以在屏幕截图中看到:
最佳答案
您没有让我们知道您使用的是哪个 Bootstrap 版本。我会看看他们的文档 v4 documentation或 v3 documentation
如果您使用的是 Bootstrap ,则不需要手动设置任何 css。尝试将 visible-sm
类添加到您要在较大设备上显示的类。
<div class="form-group hidden-sm hidden-md hidden-lg">
<!-- input type slider for mobile devices -->
</div>
<div class="form-group hidden-xs visible-sm">
<!-- input type text for wider screen devices -->
</div>
关于CSS 类 hidden-xx 不适用于边界宽度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43288409/