CSS 类 hidden-xx 不适用于边界宽度值

Question

我正在使用 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/

此处的窗口宽度会有所不同，但您可以在屏幕截图中看到:

Answer 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>