ブランドの隣にあるテキスト

Question

ブートストラップブランドと付随するテキストをブランドとして一緒に扱うにはどうすればよいですか？

私はこれを試してみました：

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <div class="navbar-brand"> 
      <a href="..." ><img class="img-responsive" src="/brand.png")?>"></a> 
      <h3>Ultimate Trade Sizer</h3> 
     </div> 
    </div> 
</nav> 

しかし、私は彼らが整列する（並んで、すなわち側）を取得することはできません。私はimg-responsiveクラスがdisplay:blockを持っているので、これが起こっているブートストラップ3

Answer 1

を新しいCSSクラスを追加ラップdisplay: inline

から span

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
      <span><img src="#"/></span> 
      Ultimate Trade Sizer 
     </a> 
    </div> 
</nav> 

spanデフォルトの画像210

Answer 2

を使用していますので、予めご了承ください

：それは、以下の効果を発揮します。このケースでは、すでに非常に小さく、応答性が必要な問題に遭遇する可能性が低いため、表示している画像にそのクラスが必要かどうかはわかりません。

また、この場合のimg-responsiveをdisplay:inline-blockに上書きし、h3にdisplay:inline-blockを追加することもできます。

Answer 3

これが正しいかどうかわかりませんが、画像とテキストを新しいdivクラスにラップして残りの部分をフローティングしました。また、右側のパディングを使ってimgを新しいクラスに変更し、テキストからスペースを取り除きました。私のために働くように見えましたが、私はブートストラップにはかなり新しく、そうでないかもしれません。あなたのコードは次のようになります。

HTML

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
      <div class="navbar-brand-name"> 
       <img src="#"/> 
        Ultimate Trade Sizer 
      </div> 
     </a> 
    </div> 
</nav> 

は.navbarブランドのクラスの下

.navbar-brand-name > { 

    display: inline-block; 
    float: left; 

} 

.navbar-brand-name > img { 
    display: inline-block; 
    float: left; 
    padding: 0 15px 0 0; 
} 

Answer 4

正しい解決策は、追加divやspan要素を使用するh3にnavbar-textを使用していないことであろう。

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <div class="navbar-brand"> 
      <a href="..."> 
       <img class="img-responsive" src="/brand.png">"> 
      </a> 
      <h3 class="navbar-text">Ultimate Trade Sizer</h3> 
     </div> 
    </div> 
</nav> 

はnavbar-textの適切な文書のためのhttp://getbootstrap.com/components/#navbar-textを参照してください。