2013-12-22 15 views
5

私はtwitter bootstrap 3.0を使用しています。画面の解像度が小さくなるとメニューがモバイルビューに変更されます。私はdivに画像付きのスライダーが含まれていますので、私のメニューがモバイルビューに変更されたとき(画面解像度が小さい場合)、divを非表示にしたいと思います。特定の解像度のhtml要素を非表示にする

cssクラスを私のdiv visible-desktop visible-tabletに適用しようとしましたが、動作しません。

他にもできる方法はありますか?

答えて

11

ブートストラップv3を使用している場合は、応答するユーティリティクラス名を変更しました。それは、より簡単です..あなたはおそらくこれもMigrating from 2.x to 3.0

7

メディアクエリの使用を検討してください。何かのように

@media screen and (max-width:480px) { 
    .mydiv {display:none} 
} 
+0

FYIブートストラップは、小さな画面を検出する* <768px *を使用し – Phil

0

あなたはそのdiv要素.hidden-xsのクラスに入れることができますに記載されていました.hidden-xs

をしたいhttp://getbootstrap.com/css/#responsive-utilities

参照してください。このdivがデスクトップやタブレットに表示されているだけで、小さなデバイスでは表示されないとは言えません。

4

hereのように、ブートストラップクラスを適用するだけで済みます。ブラウザ画面のサイズを変更すると、それらがアクティブかどうかを確認できます。

<div class="hidden-xs">This is the div that will hide on mobile</div> 

のみ768px(携帯電話)蛇腹任意の画面で見られるべき

関連する問題