ブートストラップナビゲーションバーで画像を適切に配置する方法

レンダリング時に{{heading}}が「メトリクス管理の概要」として評価されている私のウェブページのナビゲーションバーは以下のようになります。 htmlはブートストラップを使っています：ブートストラップナビゲーションバーで画像を適切に配置する方法

<html> 
<head> 
    <title>{{ heading }}</title> 
</head> 
<body> 
    <div class="bs-iso"> 
    <nav class="bs-iso navbar navbar-inverse navbar-fixed-top"> 
     <div class="bs-iso container-fluid"> 
      <div class="bs-iso navbar-header"> 
       <a class="bs-iso navbar-brand" href="/">{{heading}}</a><a id="foo" class="bs-iso navbar-brand" href="#"></a> 
      </div> 
      <div class=" bs-iso navbar-text navbar-right" style="margin-right:14px;"> 
       Sign In ! 
      </div>

ここでは、本文の見出しの直前にイメージを挿入します。私は、特定のパスからそのイメージを取り出してレンダリングしようとしています。しかし、画像と見出しはインラインではなく、適切な位置合わせをしています。それを正しく取得するために必要な特別なブートストラップクラスまたはCSS設定がありますか？以下は

その画像タグ挿入した後にhtmlです：

<html> 
<head> 
    <title>{{ heading }}</title> 
    {{> css }} 
</head> 
<body> 
    <div class="bs-iso"> 
    <nav class="bs-iso navbar navbar-inverse navbar-fixed-top"> 
     <div class="bs-iso container-fluid"> 
      <div class="bs-iso navbar-header"> 
       <a class="bs-iso navbar-brand" style='padding:0 !important' href="/"> 
       <table><tr><td><img class='img-responsive2' src = 'image/foo.jpg'></td></tr></table> 

       {{heading}}</a><a id="foo" class="bs-iso navbar-brand" href="#"></a> 
      </div> 
      <div class=" bs-iso navbar-text navbar-right" style="margin-right:14px;"> 
       Sign In ! 
      </div>

出典

2017-04-12 A.G.Progm.Enthusiast

uはこの

HTMLタグ

<a class="navbar-brand" href="#"> <img src="images/Logos.png" alt="company" class="img-resonsive"></a>

CSSを試すことができます

.navbar-brand { 
     height: auto !important; 
     padding: 10px 5px !important; 
    }

を

しかし、私の画像は私が使用していますサイズ141x147

出典

2017-04-12 11:47:47

まずはお返事ありがとうございます。それは部分的に私のために働いています。イメージは適切な位置合わせで来るが、テキスト（すなわち見出し）は少し下にシフトしている。 –

私のhtmlでちょっと微妙に調整して、あなたの解決策が働いています。ありがとう。 –

ブートストラップナビゲーションバーで画像を適切に配置する方法

答えて

関連する問題