話題のウェアラブルスピーカー開封レビューはこちら

【Bootstrap4】画面サイズによってcolなどの要素を表示する/しない方法

最近は Bootstrap4 などを勉強しています。

画面の幅が広いときは縦3カラム、
幅が狭くなったりスマホ表示だとそれを縦にして、かつ要素をひとつ非表示にしたい

そういったことをやりたくて以下のガイドを読んでみたけど…

Bootstrap4移行ガイド

なるほど、わかりにくい。

 

ということで、具体例を示しながら実装方法をメモしていくことにします。

 

スポンサーリンク

 

サンプル

See the Pen Bootstrap4 Hiding elements by enicalpha (@enicalpha) on CodePen.

初期表示時が画面幅が狭いときの表示で、HTMLボタンを押して結果が広く見えている状態が画面幅が広いときの表示だと思ってください。

狭いときは2行、広いときは3列になっていますね。

 

サンプルじゃわかりにくいときのための画像

画面幅が広いとき

画面幅が狭い/スマホ表示

 

ソースコードを解説

ポイントは以下の部分です。

HTML
<div class="col-sm-2 bg-info"></div>
<div class="col-sm-4 d-none d-sm-block bg-secondary"></div>
<div class="col-sm-6 bg-warning">

画面幅が狭いスマホ表示のときに非表示にしているのは、グレーの背景、ふたつめのカラムです。

スマホ表示で見えなくするにはd-none d-sm-blockの部分が重要。

後ろ側から説明しますが、d-sm-blockは幅が xl, lg, md, sm までは block 表示をして、それ以外のときにはd-noneで表示しないように指定しています。

 

今回は、Bootstrap4移行ガイド にある

.d-none.d-sm-{display}

を例にしています。

この .d-none.d-sm-{display} のとおりに HTML に書いても表示に成功しないので気をつけてくださいね。

上のコードのように、d-none d-sm-blockとして別のクラスに分けます。

そのとき、{display} の部分を block, inline, inline-block, table, table-cell, table-row, flex, inline-flexのいずれかで置換します。

書いてあるけどわかりにくいところだと思います。実際僕は少しつまりました。

 

以上、参考になりましたでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です