6

xs幅でのみハンバーガーボタンに折りたたまれますが、幅が広いと完全に表示されるブートストラップ4レスポンシブナビゲーションバーの例を見つけようとしています。

Just Worksのブートストラップ3のがありますが、私が見つけた4の例はありません。

ブートストラップ 4 navbar の例のページには、折りたたまれたコンテンツバージョンが表示されますが、すべての幅で折りたたまれています。

その下には、.navbar-toggler などを使用して機能させる方法のヒントがあります。アル。

Bootstrap v3 で使用されているものなど、より複雑な navbar パターンについては、.navbar-toggler と組み合わせて .navbar-toggleable-* クラスを使用します。これらのクラスは、レスポンシブ ユーティリティをオーバーライドして、コンテンツの表示が意図されている場合にのみナビゲーションを表示します。

私は最小限のブートストラップの知識しか持っていないので、これを行うための認可された方法が既にある場合、フレームワークと戦いたくない解決策があります。

編集:

実際、ブートストラップ 4 のドキュメントの折りたたみ可能なコンテンツの下にあるレスポンシブ ナビゲーション バーの例は、 navbar-toggleable-xsクラスを使用して私が探していたものを正確に実行します。ウィンドウを十分に狭くしなかったため、以前は表示されませんでした。

4

1 に答える 1

12

ブートストラップ 4 安定版:

安定版でnavbar-toggleable-*は に名前が変更されましnavbar-expand-*たが、-xsインフィックスは (まだ) 削除されているため、この場合は を使用する必要がありますnavbar-expand

ドキュメントの説明: https://getbootstrap.com/docs/4.1/components/navbar/#how-it-works

Bootstrap 4 alpha のみ:

実際、Bootstrap 4 ドキュメントの折りたたみ可能なコンテンツの下にある Responsive Navbar の例は、navbar-toggleable-xsクラスを使用して私が探していたものを正確に実行します。ウィンドウを十分に狭くしなかったため、以前は表示されませんでした。

Bootstrap 4 alpha 6 では、単純navbar-toggleable-xs.

編集:ドキュメントのリンクはここにあります: http://v4-alpha.getbootstrap.com/components/navbar/#nav

于 2015-11-17T23:25:59.783 に答える