Bootstrap - Wie man ein Logo zu navbar Klasse hinzufügen?

Ich möchte ein Logo in der oberen Navigationsleiste innerhalb der Navigationsleiste-Marke hinzufügen. Ich möchte es mit der Viewport-Größe zu skalieren, so dass ich img-responsive2 Klasse verwenden.

Es scheint, dass sowohl das Bild und der Text in der navbar-Marke auf die nächste Zeile umbrechen.

Diese Seite kann unter http://digitalponddesign.com/dev/ eingesehen werden.

Vielen Dank im Voraus für Ihre Hilfe.

Hier ist mein Code:

Html

   <h2 class="navbar-brand brand-name">
       <a href="index.html"><img class="img-responsive2"       
       src="images/DigitalPondlogo.png">DigitalPond</a>
   </h2>

CSS

.navbar {
margin: 10px 0;

}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}

.nav-container {
padding-top: 8px;
}

.navbar-custom {
font-size: 20px;
background-color: #FFF;

}
leppie
Bearbeitete Frage 6. Februar 2015 в 4:50
Programmierung
twitter-bootstrap
6. Februar 2015 в 4:15
noch keine Aufrufe

Ich habe in einem anderen Thread eine Lösung gefunden, die funktioniert - verwenden Sie die Klasse pull-left:

 <a href="#" class="pull-left"></a>

Dank an Michael in diesem Thread:

https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class

Community
Bearbeitete Antwort 23. Mai 2017 в 11:54
Kommentare (1)

Sie können einfach sowohl den Text als auch das Bild als Inline-Blöcke anzeigen, so dass sie nicht gestapelt werden. Die Verwendung von Floats wie pull-left/pull-right kann unerwünschte Probleme verursachen, so dass sie sparsam verwendet werden sollten

<a class="navbar-brand" href="#">

  <span style="display: inline-block;">My Company</span>
</a>
Kommentare (0)

Ich würde Ihnen vorschlagen, entweder ein Bild oder einen Text zu verwenden. Also, entfernen Sie den Text und fügen Sie es in Ihr Bild (mit Photoshop, vielleicht). Dann, Verwenden Sie eine Breite und Höhe 100% für das Bild. es wird den Trick tun. weil das Bild auf der Grundlage der Container in der Größe angepasst werden kann. Aber Sie müssen die Größe des Textes manuell anpassen. Wenn Sie die Fiddle zur Verfügung stellen können, kann ich Ihnen helfen, dies zu erreichen.

Kommentare (6)