CSS class hidden-xx不適用於邊界寬度值

Question

我使用Bootstrap使用響應式設計創建表單。我的目標是在移動設備上輸入滑塊類型，並在中等設備上輸入文字。

因此，我使用兩個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> 

我也有一個@media規則在我的CSS文件：

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