bootstapでスマホでグリッド分割時に表示が乱れるのを防ぐ方法

スポンサーリンク

Bootstrapのグリッドスタイルを使用している場合に、スマホで分割位置を変えて指定すると、行内の各セルの要素の高さがバラバラなことが原因で表示が崩れてしまうことがあります。そんな時に行の高さを指定することなく解決する方法をご紹介します。

行の高さを指定してしまえば、すぐに表示崩れは解決するのですが、せっかくグリッドスタイルでレスポンシブデザインを実現しているのですから、決まった値を指定してしまうのは残念ですよね。

そんな時には、「visible-xs-block」クラスを使ってみましょう。

visible-xs-blockとは、名前の通り、xsサイズの画面でのみ表示してくれる要素にしてくれる便利なクラスです。このクラスを指定することで、スマホだけ分割位置・改行・メニューなどを自由に追加することができます。

グリッドスタイル内で、スマホのみ空白行を入れたい時には、divタグに指定し、マージンボトムを指定すると実現します。


<div class="visible-xs-block breakpoint"></div>

 


breakpoint{
margin-bottom:2em;
}

スマホのみ空白行を入れたい時には、次のコードでOK。

<br class=”visible-xs-block”>

ブランクタグにvisible-xs-blockクラスを指定して、スマホでだけ表示されるブランクタグになります。

他に、.visible-sm-block、.visible-sm-block、.visible-lg-blockとサイズに合わせてクラスが用意されていますし、非表示にしてくれる.hidden-xs-blockクラス等も用意されています。

上手く活用すると、スマホでは非表示になる広告スペース、メニューを作ったり、PCでのみ表示されるお知らせなどが簡単に実現可能です。いろいろ試してみてください。

スポンサーリンク

お知らせ 

この記事と一緒によく読まれています!