ブートストラップ4 navbar、ドロップダウン、レスポンステンプレート？

Question

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

ブートストラップ4を使用してこれを行うサンプルまたはテンプレートはありますか？私が敏感な例は、メニューを崩壊させ、3バーのボタンを表示したが、メニューはアコーディオンのメニューにはならない。 BS4には多くのドロップダウン例がありますが、応答性はありません。

画面が小さくなり、すべての同じオプションでアコーディオンが現れたら、ナビゲーションバー全体を隠すだけでいいですか？これはBS3よりもはるかに多くの作業のようです。これに

Answer 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; 
    } 
} 

ここsimple example on CodePenです。それほど精巧ではありませんが、その点を説明する必要があります。