1

B3 には、ドロップダウン メニューを備えたトップ ナビゲーション バーのテンプレートがたくさんあります。画面サイズが小さくなると、メニューは 3 バー ボタンに折りたたまれ、メニューはアコーディオン メニューになります。

Bootstrap 4 を使用してこれを行う例やテンプレートはありますか? 私が見つけたレスポンシブの例では、メニューが折りたたまれ、3 バー ボタンが表示されますが、メニューはアコーディオン メニューにはなりません。BS4 のドロップダウンの例も多数ありますが、レスポンシブではありません。

画面が小さくなったときにナビゲーションバー全体を非表示にし、すべて同じオプションを備えたアコーディオンを表示する必要がありますか? これは、BS3 よりもはるかに多くの作業のようです。

4

1 に答える 1

1

これに対する私の解決策は、ナビゲーションが折りたたまれている画面サイズをターゲットとするカスタム CSS にメディア クエリを追加し、要素を好きなようにスタイル設定することです。

@media (max-width: 544px) {
  .navbar-brand {
    display:none;
  }
  .navbar-nav .nav-item {
    float:none;
  }
  .navbar-nav .nav-item + .nav-item{
    margin-left:0;
  }
}

CodePenの簡単な例を次に示します。あまり洗練されていませんが、ポイントを説明する必要があります。

于 2016-04-25T07:32:25.057 に答える