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

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


開発

bootstrapのパンくずリスト。

Breadcrumb
参考
Breadcrumb

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

これはbootstrapでは、

.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;に変更します。

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

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

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

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


開発

bootstrapのパンくずリスト。 https://getbootstrap.com/docs/4.0/components/breadcrumb/ これはbootstrapでは、 .breadcrumb { disp…


関連する記事



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す