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

Ich habe das gleiche Problem endlich gelöst, hier ist meine Lösung und ich habe sie auf meiner Website in allen drei gängigen Browsern getestet: Chrome, Firefox und Internet Explorer.

Zunächst einmal, wenn Sie kein Textlogo verwenden, entfernen Sie "navbar-brand" vollständig, da ich festgestellt habe, dass diese bestimmte Klasse die Hauptursache für die Verdopplung meines zusammengebrochenen Navigationsmenüs war.

Danke an user3137032, der mich in die richtige Richtung geführt hat.

Sie müssen einen benutzerdefinierten reaktionsfähigen Bildcontainer erstellen, ich habe meinen "logo" genannt.

Hier ist das Bootstrap-HTML-Markup:

             Über uns

             Kontakt

             Produkte

Und der CSS-Code:

.logo img {
width: 100% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Erzwingt IE10 und darunter, SVG-Bilder korrekt zu dimensionieren*/
    max-width: 50%;
}
}

Der Wert in @media (max-width: x) kann je nach Breite Ihrer Logo-Bilder variieren, meine beträgt 368px. Die Prozentsätze müssen möglicherweise ebenfalls je nach Größe Ihres Logos geändert werden. Die erste @media-Abfrage sollte Ihr Schwellenwert sein und meiner war die Bildbreite (368px) + die Breite der zusammengeklappten Schaltfläche (44px) + ungefähr 60px und ergab 480px, wo ich mit der reaktionsfähigen Bildskalierung beginne.

Bitte entfernen Sie meine Razor-Syntax aus den HTML-Teilen. Lassen Sie mich wissen, ob es Ihr Problem löst, es hat meins gelöst.

Bearbeitung: Entschuldigung, ich habe Ihr Problem mit der Höhe der Navigationsleiste übersehen. Es gibt ein paar Möglichkeiten, damit umzugehen. Persönlich kompiliere ich das Bootstrap LESS mit der entsprechenden Höhe der Navigationsleiste, für meine Zwecke verwende ich 70px, und die Höhe meines Bildes beträgt 68 px. Die zweite Möglichkeit besteht darin, die Datei bootstrap.css selbst zu ändern, suchen Sie nach ".navbar" und ändern Sie min-height auf die Höhe Ihres Logos.

Answer 2

Meine Lösung ist es, dem img-Tag css "display: inline-block" hinzuzufügen.

DEMO: jsfiddle

Answer 3

Ich verwende die Klasse img-responsive und setze dann eine max-width auf das a Element. So:

und das CSS:

.navbar-brand {
    max-width: 50%;
}

Answer 4

Sie müssen den Code wie folgt verwenden:

        Navigation umschalten

Die Klasse des A-Tags muss "logo" sein, nicht navbar-brand.

Answer 5

Schnelle Lösung : Erstellen Sie eine Klasse für Ihr Logo und setzen Sie die Höhe auf 28px. Dies funktioniert gut mit der Navbar auf allen Geräten. Achten Sie darauf, dass ich "GUT" gesagt habe.

.logo {
  display:block;
  height:28px;
}