Bootstrap 3 Navbarとロゴ

Bootstrap 3のデフォルトのナビゲーションバーを、テキストのブランド設定ではなく、イメージのロゴとともに使用したい。さまざまな画面サイズで問題を引き起こさずにこれを行う適切な方法は何ですか？これは一般的な要件だと思いますが、良いコードサンプルはまだ見ていません。すべての画面サイズで適切な表示ができること以外の重要な要件は、小さい画面でのメニューの折りたたみ性です。

navbar-brandクラスが含まれるAタグ内にIMGタグを挿入するだけで、メニューがAndroidフォンで正しく機能しなくなりました。また、navbarクラスの高さを上げてみましたが、それによってさらに混乱しました。

ちなみに、私のロゴ画像は、ナビゲーションバーの高さよりも大きくなっています。

なぜ誰もがそれを難し​​い方法でやろうとしているのですか？もちろん、これらのアプローチの一部は機能しますが、必要以上に複雑です。

はい、最初に-ナビゲーションバーに収まる画像が必要です。cssのheight属性を使用して画像を調整するか（幅のスケーリングを可能にする）、または適切なサイズの画像を使用することができます。あなたがやろうと決めたことは何でも-これがどのように見えるかは、画像のサイズをどの程度決めるかによります。

どういうわけか、誰もがアンカーで画像をで固定したいと思っていますが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>

多くの例を含む完全なデモ

重要な更新：2015年12月21日

現在、Mozillaには、このページの多くのデモで特定のブラウザ幅のナビゲーションバーが機能しないというバグがあります。基本的に、mozillaのバグは、画像幅の一部としてnavbarブランドリンクの左右のパディングを含みます。ただし、これは簡単に修正でき、私はこれをテストしましたが、このページで最も安定した動作例であると確信しています。自動的にサイズ変更され、すべてのブラウザで機能します。

これをcssに追加して、navbar-brandを同じ方法で使用してください.img-responsive。あなたのロゴは自動的に収まります

.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で「まだ」機能しないことが指摘されました。ポリフィルがありますが、それ以外の用途に使用する予定がない場合は、多すぎる可能性があります。IEの将来のリリースではobject-fitが計画されているようです。そのため、これが発生すると、すべてのブラウザーで機能します。

ただし、ブートストラップの.img-sensitiveクラスに気付いた場合、max-widthはこれらのイメージを列または明示的なsetを持つものに配置することを想定しています。つまり、100％は特に親要素の100％の幅を意味します。

    .img-responsive
        max-width: 100%;
        height: auto;
    }

これをnavbarで使用できない理由は、親（.navbar-brand）の高さが50pxに固定されているが、幅が設定されていないためです。

そのロジックを取り、高さに基づいて反応するように反転させると、.navbar-brandの高さに合わせて反応する画像を作成でき、幅を追加して自動設定することにより、比率に合わせて調整されます。

max-height: 100%;
width: auto;

通常はdisplay:block;シナリオに追加する必要がありますが、navbar-brandにはすでにfloat：leftがあるためです。適用すると、自動的にブロック要素として機能します。

ロゴが小さすぎるというまれな状況に遭遇する場合があります。imgレスポンシブアプローチではこれは考慮されませんが、考慮されます。また、「height」属性を追加することで、.navbar-brand > img拡大と縮小の両方を確実に行うことができます。

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>

デモ http://codepen.io/bootstrapped/pen/KwYGwq

あなたの質問は興味深いですが、1つの答えがあるとは思いません。多分あなたの質問は広すぎます。ソリューションは、ナビゲーションバーの他のコンテンツ（アイテムの数）、ロゴのサイズ、ロゴが反応するかどうかなどに依存する必要があります。a（navbarブランドを使用）にロゴを追加することは、出発点として適しているようです。navbar-brandクラスを使用する必要があります。これにより、15ピクセルのパディング（上部/下部）が追加されます。

この設定をhttp://getbootstrap.com/examples/navbar/で300x150ピクセルのロゴでテストします。

全画面> 1200：

768〜992ピクセル（メニューは折りたたまれていません）：

<768（メニューは折りたたまれています）

美的側面以外に、技術的な問題は見つかりませんでした。小さな画面では、大きなロゴがビューポートに重なるか、ビューポートから外れる可能性があります。768〜992ピクセルの画面では、コンテンツが一列に収まらない場合にも他の問題が発生します。例：https : //github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

デフォルトのnavbarがあるデフォルトのnavbarの例では、30pxの下マージンが追加されているため、navbarのコンテンツがページのコンテンツと重複することはありません。（固定されたナビゲーションバーは、ナビゲーションバーの高さが変化すると問題が発生します）。

さまざまな画面サイズで必要に応じてナビゲーションバーを調整するには、CSSとメディアクエリが必要になります。質問を絞ってみてください。Androidで見つけた問題について説明してください。

更新例については、http：//bootply.com/77512を参照してください。

電話などの小さな画面では、折りたたまれたメニューがロゴの上に表示されます

コードのボタンとロゴを入れ替えます。最初にロゴ（ロゴにfloat：leftを設定）

メニュー項目を上以外に配置する方法はありません

をに設定margin-topし.navbar-collapse ulます。ロゴの高さからナビゲーションバーの高さを差し引いて、下に揃えるか、（ロゴの高さ-ナビゲーションバーの高さ）/ 2で中央に配置します

デフォルトの高さ（50px）より大きいロゴを使用してブートストラップナビゲーションバーを作成する方法：

ロゴが100px x 100pxの例、標準CSS：

1. ロゴの高さと（パディング上部+パディング下部）を計算します。ここでは120px（高さ100px +上部のパディング（10px）+下部のパディング（10px））

2. Goto ブートストラップ/カスタマイズ。navbarの高さの代わりに50px> 120px（50 + 70）に設定し、navbar-collapse-max-heightを340pxから410px（340 + 70）に設定します。CSSをダウンロードします。

3. この例では、このナビゲーションバーを使用します。でナビゲーションバーブランド：

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...

   myLogoなどのクラスとimg（ロゴ）を追加します

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>。

4. CSSを追加

   .myLogo {padding：10px; }

5. 他のサイズに十分です。

例

さて、私はようやくこれと同じ問題を機能させました。これが私の解決策です。私のサイトで、Chrome、Firefox、Internet Explorerの3つの主要なブラウザすべてでテストしました。

最初に、テキストベースのロゴを使用していない場合は、「navbar-brand」を完全に削除します。この特定のクラスが、折りたたまれたナビゲーションメニューの二重化の主な原因であることがわかったためです。

私を正しい方向に導くためにuser3137032に叫んでください。

カスタムのレスポンシブ画像コンテナを作成する必要があります。私は「ロゴ」と呼んでいます

ブートストラップ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部分からかみそりの構文を必ず削除してください。それがあなたの問題を解決するかどうか教えてください、それは私のものを修正しました。

編集：すみません、ナビゲーションバーの高さの問題がありませんでした。これにはいくつかの方法があります。個人的には、適切なナビゲーションバーの高さでBootstrap LESSをコンパイルします。私の目的では、70ピクセルを使用し、画像の高さは68ピクセルです。これを行う2番目の方法は、bootstrap.cssファイル自体で、「。navbar」を検索し、min-height：をロゴの高さに変更します。

私の解決策は、css "display：inline-block"をimgタグに追加することです。

<img style="display: inline-block; height: 30px; margin-top: -5px">

デモ：jsfiddle

私はimg-sensitiveクラスを使用して、a要素に最大幅を設定しています。このような：

<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ではなく「ロゴ」である必要があります。

それはあなたのロゴをどのくらいの高さにしたいかに依存します。

<a>navbar のデフォルトの高さは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>

これにより、画像の高さが30pxになり、上部に負のマージンが追加されて画像が垂直に配置されます（5pxは、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>

クイックフィックス：のクラスを作成し、logoをに設定heightし28pxます。これは、すべてのデバイスのナビゲーションバーで適切に機能します。作品 "WELL"と言ったことに注意してください。

.logo {
  display:block;
  height:28px;
}

私のアプローチは、次のように、電話、タブレット、デスクトップ、ラージデスクトップのさまざまなサイズの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スプライトテクニックを使用すると、ページの印刷時にロゴが印刷されず、上記のコードが取得される可能性がありますより良いSEO。

Bootstrap3がCSSを提供しているため、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>

また、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
}

別のアプローチは、実装することであるブートストラップの組み込み.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>

これは単純すぎるかもしれませんが、navbarブランドの行をコピーしただけなので、画像とテキストの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;
}

このコードは、ブランドを中央に配置し、ツールバーの幅を自動で表示する必要がある場合に最適です。これには、正しいパスから画像ファイルを取得するための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">

.navbar-brandクラスに以下を追加します

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

私の作業コード-ブートストラップ3.0.3。navbar-toggle、hidden-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>

以下のような@mediaクエリを使用してみてください。

最初にロゴクラスを追加し、次に@mediaを使用して、デバイスのサイズごとにロゴの高さと幅を指定します。以下の例では、最大幅が320pxのデバイスをターゲットにしています（iPhone）。簡単なテスト方法：要素を検査してChromeまたはFirefoxを使用します。ブラウザを可能な限り縮小します。指定した@mediaの最大幅に基づいて、ロゴサイズの変化を確認します。iPhone、Androidデバイス、iPadなどでテストして、目的の結果を取得します。

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

次のコードを試してください：

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</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>その場合はタグなし）。

これは意味的ではありませんが、私は既存のa要素を使用し、背景画像を設定してから、@ 2x解像度、小さい画面サイズなどの複数のバリエーションを作成します。

次に、.text-hideクラスを使用して、ページ上のテキストを古い方法で取得できます。画像の適切な使用ではありませんが、シンプルで効果的です。

以下は、テキスト置換用のヘルパークラスへのリンクです。

http://getbootstrap.com/css/#helper-classes

この質問の最も簡単で最良の答えは、ロゴに応じて最大の幅と高さを設定することです。画像の最大高さは50pxですが、200px以下です。

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</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>

あなた自身の努力でコードを理解してください：Dこれは私のドラフトコードであり、すでに機能しています:)これがスクリーンショットです。

テキストのブランドを置き換えるのではなく、以下のコードのように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;
}

私のコードがあなたの問題を解決するなら、それは私の喜びです.....

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <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>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

//コードの先頭にブートストラップを追加することを忘れないでください。