Boostrap4でパンくずリストの段落を落とさずに綺麗に表示する方法

2016/10/24 2016/11/21

WordPressテーマの作成にBootstrap 4を使用する機会が多いこの頃ですが、ずっと気になっていたのがパンくずリスト。

Bootstrapには標準でbreadcrumbというクラスにCSSが割り当てられていて、簡単にパンくずリストを作ることができます。

しかし、このパンくずリストはスマホで表示させると、最後の要素が1行丸々段落が落ちてしまい、なんとなく見た目が綺麗ではありません。

ずっと改善しようと思っていたのですが、うまくいかずに放置していたところ、案外単純な所を見落としていました。

Bootstrapのパンくずリストはfloatを解除する

Bootstrapでパンくずリストをマークアップすると、以下の様にクラスを指定します。

このクラスの中の<li></li>がそれぞれパンくずリストになっているのですが、このリスト要素にはfloatがかかっているため、1つ1つがブロック要素になっています。

そこで、floatを解除するために、CSSに以下の様に記述します。

.breadcrumb li {

float: none;

displya: inline;

}

たったこれだけなのですが、パンくずリストの要素が丸ごと段落を変えることなく、文字単位で次の行に落ちてくれます。

どの様な表示になるかは、このサイトのブラウザの幅を狭くしてもらえると確認することができます。

こんな単純なことだったのですが、思った通りに表示させるまでに色々なことを試して見ました。

Bootstrapはとても便利なフレームワークなのですが、その使い勝手ゆえに、よく使うクラス名にはすでにCSSが割り当てられています。

0からCSSを書いていれば、仕様に戸惑うことはありませんが、こういった場合はBootstrapに標準でどんなCSSが書かれているか確認しておく必要があります。

ただ、一度覚えてしまえば、あらかじめ自分で作ったstyle.cssの中に、こうしたCSSを書いておくと、次からBootstrapでサイトを作る時も同じ問題にぶつかることはありません。

使えば使うほど自分の好みにカスタマイズできるBootstrapは、ますます手放すことができません。

Wordpress