Bootstrap 3 Navbar mit Logo

Question

Ich möchte die Bootstrap 3 Standard-Navigationsleiste mit einem Bildlogo anstelle einer Textmarke verwenden. Wie mache ich das richtig, ohne Probleme mit verschiedenen Bildschirmgrößen zu verursachen? Ich gehe davon aus, dass dies eine häufige Anforderung ist, aber ich habe noch kein gutes Codebeispiel gesehen. Eine wichtige Anforderung neben der akzeptablen Anzeige auf allen Bildschirmgrößen ist die Menü-Zusammenklappbarkeit auf kleineren Bildschirmen.

Ich habe versucht, einfach ein IMG-Tag innerhalb des A-Tags zu platzieren, der die Klasse navbar-brand hat, aber das hat dazu geführt, dass das Menü auf meinem Android-Telefon nicht ordnungsgemäß funktioniert. Ich habe auch versucht, die Höhe der Navbar-Klasse zu erhöhen, aber das hat die Dinge noch mehr durcheinander gebracht.

Übrigens ist mein Logo-Bild höher als die Höhe der Navigationsleiste.

Answer 1

Es hängt davon ab, wie hoch du dein Logo haben möchtest.

Die standardmäßige Höhe in der Navigationsleiste beträgt 20px, daher wird es gut ausgerichtet, wenn du height: 20px für dein Logo angibst.

Allerdings ist das ein wenig klein für ein Logo, daher habe ich mich für Folgendes entschieden:

Navigation umschalten [![](/img/brand.png)](# "Marke")

Dadurch wird das Bild 30px hoch und das Bild wird vertikal ausgerichtet, indem ein negativer Abstand zum oberen Rand hinzugefügt wird (5px entspricht der Hälfte des Unterschieds zwischen dem Padding auf a und der Größe des Bildes).

Alternativ könntest du das Padding des Elements ändern, z.B. so:

Navigation umschalten [![](/img/transparent-white-logo.png)](# "Marke")

Answer 2

Mein Ansatz besteht darin, VIER verschiedene Bilder unterschiedlicher Größen für Handys, Tablets, Desktops und große Desktops einzuschließen, aber nur EINS mit den responsiven Utility-Klassen von Bootstrap anzuzeigen, wie folgt:

Hinweis: Sie können die auskommentierte Zeile durch den bereitgestellten Code ersetzen. Ersetzen Sie den PHP-Code, wenn Sie kein WordPress verwenden.

Bearbeitungshinweis: Ja, dies fügt bei Laden der Seite zusätzliche Anfragen an Ihren Server hinzu, was die Geschwindigkeit etwas verlangsamen kann. Aber wenn Sie die Hintergrund-CSS-Sprite-Technik verwenden, besteht die Chance, dass das Logo nicht gedruckt wird, wenn eine Seite gedruckt wird, und der obige Code sollte die SEO verbessern.

Answer 3

Sie sollten kein zusätzliches CSS hinzufügen müssen, da Bootstrap3 es bereitstellt. Es sei denn, Sie möchten es hinzufügen. Dies ist mein Code, um das Logo links und die Links rechts zu platzieren. Diese Navigation ist responsiv. Ändern Sie dies nach Bedarf.

HTML:

                    Startseite
                    Projekte
                    Blog
                    Kontakt

Answer 4

Fügen Sie das folgende zur Klasse .navbar-brand hinzu

.navbar-brand
{
  padding: 0px; // Dadurch kann das Bild den gesamten Padding-Bereich des Navbar-Logos einnehmen
}

.navbar-brand > img
{
   height: 100%; // Höhe auf volle Höhe des Navbar-Logos setzen
   width: auto; // Breite sollte automatisch skaliert werden
   max-height: 100%; // optional
   margin: 0 auto; // optional
}

Answer 5

Ein weiterer Ansatz besteht darin, die Built-in-Klasse von Bootstrap .text-hide neben .navbar-brand zu implementieren, um den Markentext/-inhalt durch ein Hintergrundbild zu ersetzen.

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

Navbar Brand

Dies ist eine sehr konsistente Methode, die Ihr Bild zentriert hält. Um die Größe des Bildes anzupassen, müssen Sie nur die Breite von .navbar-brand anpassen, da die Höhe bereits festgelegt ist.

Hier ist eine Live-Demo