Bootstrapを使ってスマホだけ表示したい時、もしくはスマホだけ非表示にしたい時
使用するクラスは"d-none"
<div class="d-none d-md-block">
...
</div>
こうすると、mdサイズ以上はdisplay:blockにしろってクラス名になる。
d-noneはdisplay:none つまり非表示にさせるクラス名
逆も簡単
<div class="d-block d-md-none">
...
</div>
これでmdサイズ以上は非表示になる。
ランディングページを作成する際に、
画像を2種類用意して横幅によって切り替えしたい場合などに良い。
もちろん他の要素にも使用できるので、
colと組み合わせて端末の横幅に合わせてレイアウトを変える場合にも使用できる。
結構便利なので、
Bootstrap使い始めの方とかおすすめです。
それでは。
いいなと思ったら応援しよう!
