Bootstrap 3 のデフォルトのナビゲーション バーを、テキスト ブランディングではなく画像ロゴとともに使用したいと考えています。さまざまな画面サイズで問題が発生しないように、これを適切に行う方法は何でしょうか。これは一般的な要件だと思いますが、適切なコード サンプルはまだ見たことがありません。すべての画面サイズで適切に表示されること以外に重要な要件は、小さい画面でメニューを折りたためることです。
navbar-brand クラスを持つ A タグ内に IMG タグを配置してみましたが、Android フォンでメニューが正しく機能しませんでした。また、navbar クラスの高さを高くしてみましたが、さらに状況が悪化しました。
ちなみに、私のロゴ画像はナビゲーションバーの高さよりも大きいです。
ベストアンサー1
なぜ誰もが難しい方法でやろうとするのでしょうか? 確かに、これらのアプローチのいくつかは機能しますが、必要以上に複雑です。
まず、ナビゲーション バーに収まる画像が必要です。CSS の高さ属性 (幅の拡大縮小が可能) を使用して画像を調整できます。または、適切なサイズの画像を使用することもできます。どちらにするかに関わらず、見た目は画像のサイズ設定によって決まります。
何らかの理由で、誰もが を使ってアンカー内に画像を貼り付けようとしますnavbar-brandが、これは必要ありません。 は、navbar-brand画像に必要のないテキスト スタイルとnavbar-leftクラス (pull-left と同様ですが、ナビゲーション バーで使用します) を適用します。実際に必要なのは を追加することだけですnavbar-left。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
これに続いて、画像の右側に表示されるナビゲーション バー ブランドのアイテムを追加することもできます。