Text neben der Marke

Question

Wie bekomme ich die Bootstrap-Marke und den begleitenden Text zusammen als Marke behandelt?

Ich habe dies versucht:

<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> 

Allerdings kann ich ihnen (das heißt nebeneinander) ausgerichtet werden, nicht erreichen. Es produziert die folgenden Effekt:

Bitte beachten Sie, dass ich bin mit Bootstrap 3.

Answer 1

Wrap das Bild

.navbar-Marke Klasse hinzufügen

Answer 2

Dies geschieht, weil die img-responsive Klasse display:block hat. In diesem Fall bin ich mir nicht sicher, ob Sie diese Klasse für das Bild benötigen, das Sie anzeigen, da es bereits recht klein ist und es nicht wahrscheinlich ist, dass Probleme auftreten, die reaktionsschnell sein müssen.

Alternativ können Sie img-responsive in diesem Fall zu display:inline-block außer Kraft setzen und Ihr auch haben h3display:inline-block auch haben werden.

Answer 3

Nicht sicher, ob das html korrekt ist, aber ich wickelte das Bild und den Text in eine neue Div-Klasse und Floated das links. Außerdem änderte der img die neue Klasse mit etwas Polsterung auf der rechten Seite, um es vom Text zu trennen. Schien für mich zu arbeiten, aber ich bin ziemlich neu zu Bootstrap, so dass es nicht genau richtig sein könnte. Ihr Code würde so aussehen.

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> 

die neue CSS-Klasse unter der in einem zu 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 defaults

.navbar-brand-name > { 

    display: inline-block; 
    float: left; 

} 

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

Answer 4

Die richtige Lösung wäre navbar-text auf der h3 zu verwenden und keine zusätzlichen div oder span Elemente zu verwenden:

<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> 

http://getbootstrap.com/components/#navbar-text für die ordnungsgemäße Dokumentation von navbar-text See.