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

Question

我正在使用 Bootstrap 使用响应式设计创建一个表单。我的目标是在移动设备上进行 slider 类型的输入，在中型或更大的设备上进行 text 类型的输入。

因此，我在两个 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 时，滑块隐藏，当我将宽度值设置为766px 时，输入字段隐藏。

我做错了什么？

UPD 这是工作示例：https://jsfiddle.net/rnurxbw9/1/

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

Answer 1

您没有告诉我们您使用的是哪个 Bootstrap 版本。我会查看他们的文档 v4 documentation 或 v3 documentation

如果您使用的是引导程序，则不需要手动设置任何 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>