私はブートストラップを使用してウェブサイトを構築しており、次の問題に取り組む最も良い方法は何か分かりません。ブートストラップ|応答性の高いナビゲーションバーの問題
私はナビバーの左側に大きなロゴがあり、右側には6個のナビアイテムがあります。 XS画面サイズでは、ナビアイテムは正しくバーガーメニューに崩壊しますが、そうする前にロゴの下に浮いていますが、これは正しい動作ではありません。
デモンストレーション：このWebページのサイズを変更してみてください - スタックオーバーフロー上の同様の問題へ>http://stackoverflowquestion.bss.design
一つの解決策は、単に崩壊幅を変更することでした - 異なるデバイスが差異の高さを持っているので、私はこれが最適ではないことを発見したが/幅が普遍的でないようにズームします。
この問題を解決するにはどうすればよいでしょうか？ありがとう
ここでカスタムブートストラップを生成するのが最も適切な方法は、とメディアのクエリブレイクポイントを編集することができます。ブートストラップの標準幅やその他のパラメータは単なる基本的なスケルトンです。いつでも編集できます。
編集：他の解決策 - ロゴをより小さなサイズに縮小する - 反応させる（最大幅を使用する）。
Edit2：低解像度（screen-xs）とscreen-lg/mdの場合にのみ縮小されたメニューを維持できるこのソリューションで、media-query（ロゴイメージ対応）崩壊した
問題は、navbarが崩壊するブレークポイントにあります。デフォルトでは、XSスクリーン（< 768px）に設定されています。埋め込まれたコンテンツのため、navbar-collapseはnavbar-headerの下にプッシュされます。
幅を変更して、navbar-collapseブレークポイントをsmまたはmdスクリーンに設定する必要があります。私はこの方法で何の問題も見つけられませんでした。
また、メディアクエリを使用して、navbar要素を小さく応答性にすることができます。あなたのロゴは画面の幅が小さくなるにつれて小さくなり、ナビゲーションが収まるようにすることができます。
あなたはcssを使って修正することができます。あなたのnavbarの最大高さを削除します。