ロゴ付きブートストラップ3ナビゲーションバー
Bootstrap 3のデフォルトのナビゲーションバーで、テキストブランドの代わりに画像ロゴを使用したいです。異なる画面サイズで問題を起こさずにこれを行うための適切な方法は何ですか？私はこれを共通の必要条件と仮定します、しかし私はまだ良いコードサンプルを見たことがありません。すべての画面サイズで表示できること以外に重要な要件は、小さい画面でのメニューの折りたたみ性です。
Navbarブランドのクラスを持つAタグの中にIMGタグを入れようとしましたが、それが原因で私のAndroid携帯電話でメニューが正しく機能しませんでした。私はまたNavbarクラスの高さを増やそうとしました、しかしそれは物事をいっそう台無しにしました。
ところで、私のロゴの画像はナビゲーションバーの高さよりも大きいです。
なぜみんながそれを難しいやり方でやろうとしているのですか？確かに、これらのアプローチのいくつかはうまくいくでしょうが、それらは必要以上に複雑です。
わかりました。まず、ナビゲーションバーに収まるような画像が必要です。あなたはCSSの高さ属性（幅を拡大縮小することを可能にする）を介してあなたの画像を調整することができますまたはあなたはちょうど適切なサイズの画像を使うことができます。あなたがやろうと思っていることは何でも - これがどのように見えるかはあなたがあなたのイメージをどれだけうまくサイズ調整するかによるでしょう。
何らかの理由で、誰もがnavbar-brandでアンカーの内側に画像を貼り付けたいと思っています、そしてこれは必要ではありません。 navbar-brandは、navbar-leftクラスと同様に、画像に必要ではないテキストスタイルを適用します（プルアウトのように、ナビゲーションバーで使用するため）。本当に必要なのはnavbar-leftを追加することだけです。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
画像の右側に表示されるnavbarブランドのアイテムを使用することもできます。
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
さまざまな例を含む完全なデモ
重要なアップデート：12/21/15
現在Mozillaには バグがあります - 特定のブラウザ幅で このページの多くのデモ を使用するとナビゲーションバーが壊れることを発見しました。基本的にmozillaのバグは画像幅の一部としてnavbarブランドリンクの左右のパディングを含むことです。しかし、これは簡単に修正でき、これを試してみたところ、このページで最も安定した実用的な例であると確信しています。自動的にサイズが変更され、すべてのブラウザで機能します。
これをあなたのcssに追加し、.img-responsiveと同じ方法でnavbar-brandを使うだけです。あなたのロゴは自動的にフィットします
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
もう一つのオプションは背景画像を使うことです。任意のサイズの画像を使用してから、必要な幅を設定します。
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
以下のオリジナル回答（参考のみ）
人はオブジェクトフィットについてよく忘れるようです。個人的には、画像が自動的にメニューサイズに合わせて調整されるので、作業するのが一番簡単な方法だと思います。あなたがちょうど画像に合うオブジェクトを使うならば、それは自動的にメニューの高さにサイズ変更されます。
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
これはIE "yet"では機能しないことが指摘されました。 polyfill がありますが、それを他に使用する予定がない場合は、多すぎるかもしれません。それはobject-fitが 計画中 IEの将来のリリースのように見えるので、一度起こるとこれはすべてのブラウザでうまくいくでしょう。
ただし、ブートストラップ内の.img-sensitiveクラスに気付いた場合、max-widthは、これらのイメージを列または明示的なwith setを持つものに配置していると見なしています。これは、100％が親要素の幅100％を意味することを意味します。
.img-responsive
max-width: 100%;
height: auto;
}
ナビゲーションバーでそれを使用できない理由は、親（.navbar-brand）の高さが50ピクセルに固定されているのに幅が設定されていないためです。
その論理と reverse を高さに基づいてレスポンシブにすると、.navbarブランドの高さに合わせたレスポンシブイメージを作成でき、幅を自動設定することでプロポーションに調整されます。
max-height: 100%;
width: auto;
通常、シナリオにdisplay:block;を追加する必要がありますが、navbar-brandにはすでにfloat：leftがあります。適用すると、自動的にブロック要素として機能します。
あなたのロゴが小さすぎるというまれな状況に遭遇するかもしれません。 imgに敏感なアプローチはこれを考慮に入れません、しかし私たちはそうします。 .navbar-brand > imgに "height"属性を追加することで、確実に拡大または縮小することができます。
max-height: 100%;
height: 100%;
width: auto;
それでこれを完成させるために私はそれらを一緒にしました、そしてそれはすべてのブラウザで完全に動作するようです。
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
_ demo _ http://codepen.io/bootstrapped/pen/KwYGwq
あなたの質問は面白いですが、私はそれに対する一つの答えがあるとは思わない。あなたの質問は広すぎるかもしれません。解決方法は、ナビゲーションバーの他のコンテンツ（アイテム数）、ロゴのサイズ、応答性に優れているかどうかなどに依存する必要があります。これは15ピクセルのパディング（上部/下部）を追加するので、私はnavbarブランドのクラスを使うべきです。
300×150ピクセルのロゴで http://getbootstrap.com/examples/navbar/ でこの設定をテストします。
フルスクリーン> 1200：
768〜992ピクセル（メニューは折りたたまれていません）：
<768（メニューが折りたたまれている）
審美的な側面のほかに私は技術的な問題を見つけられませんでした。小さなスクリーンでは大きなロゴがビューポートの上に重なるか、または分割されます。 768〜992ピクセルの画面でも、コンテンツが1行に収まらない場合は、他の問題もあります。例： https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
デフォルトのナビゲーションバーは デフォルトのナビゲーションバーの例では、ナビゲーションバーのコンテンツがページのコンテンツと重ならないように、下余白を30pxにしています。 （ナビゲーションバーの高さが変わると、固定ナビゲーションバーに問題が生じます）。
さまざまな画面サイズでナビゲーションバーをニーズに合わせて調整するには、いくつかのCSSおよびメディアクエリが必要になります。質問を絞り込んでください。 b.e.あなたがAndroid上で見つけた問題について説明してください。
update 例は http://bootply.com/77512 を参照してください。
電話などの小さな画面では、折りたたまれたメニューがロゴの上に表示されます。
コード内のボタンとロゴを入れ替えます。最初にロゴを付けます（フロートを設定：ロゴの上に残します）。
メニュー項目をtop以外のものに合わせる方法はありません。
margin-topに.navbar-collapse ulを設定します。ロゴの高さからナビゲーションバーの高さを引いた値を底に合わせるか、（ロゴの高さ - ナビゲーションバーの高さ）/ 2を中央に揃えます。
デフォルトの高さ（50px）よりも大きいロゴでブートストラップナビゲーションバーを作成する方法：
例 ロゴ100px x 100px、標準CSS付き：
ロゴの高さと（パディングトップ+パディングボトム）を計算します。ここで 120px （100pxの高さ+ padding top（10px）+ padding bottom（10px））
Goto ブートストラップ/ customize 。 ナビゲーションバーの高さ 50ピクセル> 120ピクセル （50 + 70）および ナビゲーションバーの最大サイズ 340ピクセルから 410ピクセル の代わりに設定します。 340 + 70） ダウンロード css。
この例では、 navbar を使用します。 navbar-brand ：に
<div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>...add クラス、たとえば myLogo 、および img （あなたのロゴ）
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>。_ css _ を追加
.myLogo {パディング：10ピクセル; }
他のサイズに適しています。
さて、私はついに同じ問題を解決しました、これが私の解決策です、そして私は私のサイトで3つの主要なブラウザすべてでそれをテストしました：Chrome、Firefox、およびInternet Explorer。
テキストベースのロゴを使用していない場合は、まず最初に、この特定のクラスが折りたたまれたナビゲーションメニューが2倍になった主な原因であることがわかったので、 "navbar-brand"を完全に削除します。
正しい方向に案内してくれたuser3137032に声をかけてください。
カスタムレスポンシブイメージコンテナを作成する必要があります。私の名前は「logo」です。
これがブートストラップHTMLマークアップです。
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
そしてCSSコード：
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
@media（max-width：x）の値はあなたのロゴ画像の幅によって変わるかもしれません、私のものは368pxです。ロゴのサイズによっては、割合を変更する必要があるかもしれません。最初の@mediaクエリはあなたの限界値であるべきです、そして私のものは画像幅（368px）+折りたたまれたボタンサイズ（44px）+約60pxであり、それは私がレスポンシブ画像スケーリングを始めるところである480pxに出ました。
HTML部分から私のかみそりの構文を削除してください。それがあなたの問題を解決するか、私の問題を解決したかどうか私に知らせてください。
編集：申し訳ありませんが、ナビゲーションバーの高さの問題を見逃しています。それには2つの方法があります。私の目的のためには、70pxを使用し、イメージの高さは68pxです。それを行う2番目の方法は、bootstrap.cssファイル自体の中で、 "。navbar"を検索してmin-height：をあなたのロゴの高さに変更することです。
私の解決策は、imgタグにcss "display：inline-block"を追加することです。
<img style="display: inline-block; height: 30px; margin-top: -5px">
デモ： jsfiddle
Img-sensitiveクラスを使用してから、a要素にmax-widthを設定します。このような：
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
そしてCSS：
.navbar-brand {
max-width: 50%;
}
このようにコードを使わなければなりません：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>
Aタグのクラスはnavbar-brandではなく「logo」である必要があります。
クイックフィックス ：logoのクラスを作成し、heightを28pxに設定します。これはすべてのデバイスのナビゲーションバーでうまく機能します。私が「よく」という作品を言ったことに注意してください。
.logo {
display:block;
height:28px;
}
ロゴの高さによって異なります。
ナビゲーションバーのデフォルトの<a>の高さは20pxなので、ロゴにheight: 20pxを指定した場合は、うまく整列します。
しかし、それはロゴにとってはちょっと小さいので、私が選んだのはこれでした：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
これにより、イメージの縦が30ピクセルになり、上部に負の余白が追加されてイメージが縦に整列します（5ピクセルは、aの余白とイメージのサイズの差の半分です）。
あるいは、<a>要素のパディングを変更することもできます。例えば：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
私のアプローチは、電話、タブレット、デスクトップ、大型デスクトップ用にサイズの異なる4つの画像を含めることですが、ブートストラップのレスポンシブユーティリティクラスを使用して1つだけを表示する方法です。
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
注：コメント行を提供されているコードに置き換えることができます。あなたがワードプレスを使用していない場合はPHPコードを交換してください。
編集注2：はい、これはページをロードするときにサーバーにリクエストを追加するので少し時間がかかる場合がありますが、バックグラウンドのCSS Spriteテクニックを使用する場合より良いSEO。
もう1つの方法は、 Bootstrapの組み込み.text-hideクラス を.navbar-brandと一緒に実装して、ブランドのテキスト/コンテンツを背景画像に置き換えることです。
CSS：
.navbar-brand{
background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}
HTML：
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
これは非常に一貫した方法であり、あなたのイメージを中心に保ちます。画像のサイズを調整するには、高さが既に設定されているので、.navbar-brandの幅を調整するだけです。
私は同じ問題を抱えていました。私はこのように解決しました：
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
Navbarブランドのクラスはありません。結果は、ナビゲーションバーに収まり、リンクのように機能するロゴ画像のように見えます。また、メニュー項目にnavbar-rightクラスを使用してロゴの下に移動しないようにすることをお勧めします。
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
また、css backgroundプロパティを介して実装します。任意の幅の値で正常に機能します。
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
これは単純すぎるかもしれませんが、私はnavbar-brandの行をコピーしたので、そのうちの2つ、画像とテキストがあります。
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
そして私はナビゲーションバーの中に収まるような画像（高さのおよそ1/2）を作りました。
LESSを使用している場合、これは機能します。
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
Bootstrap3で提供されているので、CSSを追加する必要はありません。追加しない限り。これは私のコードです。ロゴを左側に、リンクを右側に配置します。このナビゲーションは反応が早いです。あなたが合うようにこれに変更を加えなさい。
HTML：
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
このコードは、ブランドを中央に表示し、ツールバーの幅を自動設定する必要がある場合に最適です。これは、正しいパスから画像ファイルを取得するためのWordpress関数を含みます。
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
テキストのブランディングを置き換える代わりに、以下のコードのように2行に分けて、画像にimg-responsiveクラスを付けました......
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->
また、以下のCSSコードを追加しました.......
#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}
私のコードがあなたの問題を解決するならば、それは私の喜びです.....
あなたは以下のような@mediaクエリを使ってみるかもしれません。
最初にロゴクラスを追加してから、@ mediaを使用してデバイスサイズごとのロゴの高さと幅を指定します。以下の例では、最大幅320pxのデバイスをターゲットとしています（iPhone）。テストする簡単な方法：inspect要素でchromeまたはFirefoxを使用してください。ブラウザをできるだけ小さくします。指定した@media最大幅に基づいてロゴのサイズが変わることを確認してください。 iPhone、Androidデバイス、iPadなどでテストして目的の結果を得ます。
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
この質問に対する最も簡単で最良の答えは、ロゴに応じて最大の幅と高さを設定することです。画像は最大50px、最大200pxになります。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
これはロゴのサイズとナビゲーションバーの項目によって異なります。
私の場合は他の答えのどれもうまくいかなかった（おそらく私は知能テストに合格しなかった）。そしていくつかの実験の後、これが私が使っているものである（私はBootstrapのデフォルトに非常に近いと思う）
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>
そしてCSSファイルに以下を追加しました：
.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}
@Html.ActionLink()は<a>タグのかみそりの構文です。 @Html.ActionLink(...)と書かれている箇所では、適切な<a>タグに置き換えてください。同様に、@Url.Action(...)と書いてある箇所は適切なURLに置き換えてください（その場合は<a>タグはありません）。
次のコードを試してください。
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>
あなた自身の努力でコードを理解してください。
私の作業中のコード - ブートストラップ3.0.3。 navbar-toggleを押すと、隠されたxsの元のロゴ画像。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
これは意味論的なものではありませんが、私はただ既存のa要素を使用して背景画像を設定し、そして2倍の解像度、より小さな画面サイズなどのために複数のバリエーションを作成します.
その後、.text-hideクラスを使用して、ページ上のテキストを古い方法で取得できます。単純で効果的ですが、画像の適切な使用法はありません。
これはテキスト置換のためのヘルパークラスへのリンクです。