Text neben Marke

Question 1

Wie bekomme ich die Bootstrap-Marke und den dazugehörigen Text zusammen als Marke behandelt?

Ich habe dies versucht:

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

Ich kann sie jedoch nicht ausrichten (dh nebeneinander). Es erzeugt den folgenden Effekt:

Bitte beachten Sie, dass ich Bootstrap 3 verwende.

Question 2

Wickeln Sie das Bild in a 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 standardmäßig auf display: inline

Question 3

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

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

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

Question 4

Ich bin mir nicht sicher, ob dies das richtige HTML ist, aber ich habe das Bild und den Text in eine neue div-Klasse gepackt und diese nach links verschoben. Außerdem wurde das Bild in die neue Klasse mit etwas Polsterung auf der rechten Seite geändert, um es vom Text abzuheben. Schien für mich zu funktionieren, aber ich bin ziemlich neu in Bootstrap, also ist es vielleicht nicht genau richtig. 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>

fügen Sie die neue CSS-Klasse unter der Klasse .navbar-brand hinzu

.navbar-brand-name > {

  display: inline-block;
  float: left;

}

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

Question 5

Dies geschieht, weil die img-responsive Klasse hat display:block. In diesem Fall bin ich mir nicht sicher, ob Sie diese Klasse für das angezeigte Bild benötigen, da es bereits ziemlich klein ist und wahrscheinlich nicht auf Probleme stoßen wird, da es reaktionsfähig sein muss.

Alternativ könnten Sie überschreiben img-responsive in diesem Fall zu display:inline-block und habe auch deine h3 sich verhalten display:inline-block auch.