[Bootstrap]スマホの時だけ隠したい画面があるのですが（hidden,visible）


ダディーです。
BootstrapでWebサイトを作っている時、こんなことが。

「広告を置くスペースを確保してみたが、スマホで表示するとだいぶ窮屈じゃないか…？」
どんな感じのWebサイトになったのかというとこんな感じ。


コンテンツA


コンテンツB


広告


コンテンツC

スマホで表示すると横にあるコンテンツが潰れて窮屈になりますね。
（PCの方はブラウザの画面幅を狭めてみるとわかりやすいと思います。）

この場合、スマホ表示の時だけ広告を非表示にして、その分を横のコンテンツに割り当ててあげれば、
余裕ができるのでは…！と思ったわけです。

特定の画面サイズの時だけ非表示にする -hiddenクラス-

上記の場合、「col-xsの時だけ”広告”を非表示にして、コンテンツAとBの割り当てを増やす」と、
窮屈になったり表記が崩れることもなくすっきりになります。

そのときに大活躍するのがclass=”hidden-xs(sm/md/lg)”です。
使い方は、col-xsの代わりにhidden-xsを置くだけです。


こうすることで、PC表示の時は広告が表示されますがスマホ表示だと広告が消えてコンテンツAに3グリッド分が割り当てられます。
（PCの方はブラウザの画面幅を狭めてみるとわかりやすいと思います。）


コンテンツA


コンテンツB


コンテンツC

hidden各種を適応させた場合、以下の表のとおりに動きます。
hiddenを書いた部分だけ非表示になります。

col-xs col-sm col-md col-lg
hidden-xs 非表示 表示 表示 表示
hidden-sm 表示 非表示 表示 表示
hidden-md 表示 表示 非表示 表示
hidden-lg 表示 表示 表示 非表示

タブレット（col-sm）以降の画面サイズでは全て非表示にしたい、という時は

と書けばいいことになります。

この画面サイズだけ表示させたい　-visible-

hiddenとは逆に、スマートフォンのときだけ表示させたいコンテンツなどもあると思います。
ただその場合、hiddenを使ってxsだけ適用させないとなると、


となり、非常にスッキリしない書き方になります。
そんな時に大活躍するのがclass=”visible-xs(sm/md/lg)”です。
使い方は、visible-xsを置いて、col-xs-○○でグリッドの割り当てをするだけです。


visible各種を適応させた場合、以下の表のとおりに動きます。
visibleを書いた部分だけ表示になります。

col-xs col-sm col-md col-lg
visible-xs 表示 非表示 非表示 非表示
visible-sm 非表示 表示 非表示 非表示
visible-md 非表示 非表示 表示 非表示
visible-lg 非表示 非表示 非表示 表示

Bootstrap

Posted by ダディ