Bootstrapのパンくずリストを1行表示にして、超過分は省略する。

作成日： 2018年8月26日

bootstrapのパンくずリスト。

Breadcrumb https://getbootstrap.com/docs/4.0/components/breadcrumb/

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

bootstrapでパンくずリストのスタイルは、

CSS 
.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: .25rem;
}

と、display: flex;を使用する前提で定義されています。

これを、1行表示するためには、ol要素に新しく以下のように定義した.breadcrumb-ellipsisクラスを追加して、その子要素liをdisplay: inline;に変更します。

CSS 
.breadcrumb-ellipsis{
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.breadcrumb-ellipsis .breadcrumb-item{
  display: inline;
}

実装するとこんな感じになります。

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
7月豪雨災害による土砂災害復旧作業で電動ハンマーが大助かりです。
次の記事 ➡
Bootstrapの変数を自分のSCSS（SASS）で使う方法

関連投稿

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。