CSSクラス隠さ-xxの境界幅値

Question

のない作品、私はブートストラップを使用して応答性のデザインを使用してフォームを作成していません。私の目標は、モバイルデバイス上のスライダー種類、およびメディアデバイスと大きめのテキストタイプだろうな入力を行うことです。

この理由から、デバイスの画面幅（例：hidden-xs、hidden-sm、hidden-md、hidden-lg）に応じて2つのdivで異なるクラスを使用してコンテンツを表示したり非表示にしています。

<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; 
    } 
} 

それは両方のdivが表示されている。この幅に、767pxの境界幅の値を除いて、私は期待どおりに動作：

幅の値を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>