サイトマッププライバシーポリシーお問い合わせMenuシンプルなブロガー向けWordPressテーマホームお知らせbootstapでスマホでグリッド分割時に表示が乱れるのを防ぐ方法2017/7/14(金)2017/7/14(金)きむおばスポンサーリンクBootstrapのグリッドスタイルを使用している場合に、スマホで分割位置を変えて指定すると、行内の各セルの要素の高さがバラバラなことが原因で表示が崩れてしまうことがあります。そんな時に行の高さを指定することなく解決する方法をご紹介します。行の高さを指定してしまえば、すぐに表示崩れは解決するのですが、せっかくグリッドスタイルでレスポンシブデザインを実現しているのですから、決まった値を指定してしまうのは残念ですよね。そんな時には、「visible-xs-block」クラスを使ってみましょう。visible-xs-blockとは、名前の通り、xsサイズの画面でのみ表示してくれる要素にしてくれる便利なクラスです。このクラスを指定することで、スマホだけ分割位置・改行・メニューなどを自由に追加することができます。グリッドスタイル内で、スマホのみ空白行を入れたい時には、divタグに指定し、マージンボトムを指定すると実現します。breakpoint"></div>breakpoint{margin-bottom:2em;}スマホのみ空白行を入れたい時には、次のコードでOK。class=”visible-xs-block”>ブランクタグにvisible-xs-blockクラスを指定して、スマホでだけ表示されるブランクタグになります。他に、.visible-sm-block、.visible-sm-block、.visible-lg-blockとサイズに合わせてクラスが用意されていますし、非表示にしてくれる.hidden-xs-blockクラス等も用意されています。上手く活用すると、スマホでは非表示になる広告スペース、メニューを作ったり、PCでのみ表示されるお知らせなどが簡単に実現可能です。エクスプロジフ)タッチアップ画像と使用感レビューこのサイトはエックスサーバーを使用しています。高速で簡単に使えるブロガーに人気のレンタルサーバーですよ。