Bootstrap 3 Navbar mit Logo

Ich möchte die Bootstrap 3-Standardnavigationsleiste mit einem Bildlogo anstelle von Textbranding verwenden. Was ist der richtige Weg, um dies zu tun, ohne Probleme mit unterschiedlichen Bildschirmgrößen zu verursachen? Ich gehe davon aus, dass dies eine häufige Anforderung ist, habe aber noch kein gutes Codebeispiel gesehen. Eine andere wichtige Anforderung als eine akzeptable Anzeige auf allen Bildschirmgrößen ist die Zusammenlegbarkeit des Menüs auf kleineren Bildschirmen.

Ich habe versucht, nur ein IMG-Tag in das A-Tag einzufügen, das die Navbar-Markenklasse hat, aber das hat dazu geführt, dass das Menü auf meinem Android-Handy nicht richtig funktioniert. Ich habe auch versucht, die Höhe der Navbar-Klasse zu erhöhen, aber das hat die Dinge noch mehr durcheinander gebracht.

Mein Logo ist übrigens größer als die Höhe der Navigationsleiste.

Warum versuchen alle, es auf die harte Tour zu machen? Sicher, einige dieser Ansätze werden funktionieren, aber sie sind komplizierter als nötig.

OK, zuerst benötigen Sie ein Bild, das in Ihre Navigationsleiste passt. Sie können Ihr Bild über das Attribut "CSS-Höhe" anpassen (damit die Breite skaliert werden kann) oder einfach ein Bild mit geeigneter Größe verwenden. Was auch immer Sie sich entscheiden - wie es aussieht, hängt davon ab, wie gut Sie Ihr Bild dimensionieren.

Aus irgendeinem Grund möchte jeder das Bild in einen Anker stecken navbar-brand, und dies ist nicht erforderlich. Wendet Textstile an, die für navbar-brandein Bild und die navbar-leftKlasse nicht erforderlich sind (genau wie nach links ziehen, jedoch zur Verwendung in einer Navigationsleiste). Alles was Sie wirklich brauchen, ist hinzuzufügen navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Sie können dem sogar ein Navbar-Markenelement folgen, das rechts neben dem Bild angezeigt wird.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

VOLLSTÄNDIGE DEMO MIT VIELEN BEISPIELEN

WICHTIGES UPDATE: 21.12.15

Derzeit ist in Mozilla ein Fehler aufgetreten, der die Navigationsleiste bei bestimmten Browserbreiten mit VIELEN DEMOS AUF DIESER SEITE beschädigt . Grundsätzlich umfasst der Mozilla-Fehler das Auffüllen der linken und rechten Seite des Navbar-Markenlinks als Teil der Bildbreite. Dies kann jedoch leicht behoben werden, und ich habe dies getestet und bin mir ziemlich sicher, dass es das stabilste Arbeitsbeispiel auf dieser Seite ist. Die Größe wird automatisch geändert und funktioniert in allen Browsern.

Fügen Sie dies einfach Ihrem CSS hinzu und verwenden Sie die Marke navbar auf die gleiche Weise wie Sie .img-responsive. Ihr Logo passt automatisch

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Eine andere Möglichkeit ist die Verwendung eines Hintergrundbildes. Verwenden Sie ein Bild beliebiger Größe und stellen Sie dann einfach die gewünschte Breite ein:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

ORIGINAL ANTWORT UNTEN (nur als Referenz)

Die Leute scheinen die Objektanpassung oft zu vergessen. Persönlich denke ich, dass es am einfachsten ist, damit zu arbeiten, da sich das Bild automatisch an die Menügröße anpasst. Wenn Sie nur die Objektanpassung für das Bild verwenden, wird die Größe automatisch auf die Menühöhe angepasst.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Es wurde darauf hingewiesen, dass dies im IE "noch" nicht funktioniert. Es gibt eine Polyfüllung , die jedoch möglicherweise übermäßig ist, wenn Sie sie nicht für andere Zwecke verwenden möchten. Es sieht so aus, als ob für eine zukünftige Version von IE eine Objektanpassung geplant ist. Sobald dies geschieht, funktioniert dies in allen Browsern.

Wenn Sie jedoch die .img-responsive Klasse im Bootstrap bemerken, geht die maximale Breite davon aus, dass Sie diese Bilder in Spalten oder in etwas einfügen, das explizit mit set versehen ist. Dies würde bedeuten, dass 100% spezifisch 100% Breite des übergeordneten Elements bedeutet.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

Der Grund, warum wir das mit der Navigationsleiste nicht verwenden können, ist, dass das übergeordnete Element (Marke .navbar) eine feste Höhe von 50 Pixel hat, die Breite jedoch nicht festgelegt ist.

Wenn wir diese Logik verwenden und sie umkehren , um basierend auf der Höhe zu reagieren, können wir ein ansprechendes Bild erhalten, das auf die Höhe der .navbar-Marke skaliert und durch Hinzufügen und automatisches Einstellen der Breite an die Proportionen angepasst wird.

max-height: 100%;
width: auto;

Normalerweise müssten wir display:block;das Szenario ergänzen , aber da die Marke navbar bereits float hat: left; Wenn es darauf angewendet wird, fungiert es automatisch als Blockelement.

Es kann vorkommen, dass Ihr Logo zu klein ist. Der img-responsive Ansatz berücksichtigt dies nicht, aber wir werden es tun. Wenn Sie dem Attribut "height" hinzufügen .navbar-brand > img, können Sie sicher sein, dass es sowohl vergrößert als auch verkleinert wird.

max-height: 100%;
height: 100%;
width: auto;

Um dies zu vervollständigen, habe ich beide zusammengestellt und es scheint in allen Browsern perfekt zu funktionieren.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Obwohl Ihre Frage interessant ist, erwarte ich nicht, dass es eine Antwort darauf geben wird. Vielleicht ist Ihre Frage zu weit gefasst. Ihre Lösung sollte abhängen von: anderem Inhalt in der Navigationsleiste (Anzahl der Elemente), Größe Ihres Logos, Reaktion Ihres Logos usw. Das Hinzufügen des Logos in a (mit der Navigationsleiste) scheint ein guter Ausgangspunkt zu sein. Ich sollte die Navbar-Markenklasse verwenden, da dadurch eine Auffüllung (oben / unten) von 15 Pixel hinzugefügt wird.

Ich teste diese Einstellung auf http://getbootstrap.com/examples/navbar/ mit einem Logo von 300 x 150 Pixel.

Vollbild> 1200:

zwischen 768 und 992 Pixel (Menü nicht reduziert):

<768 (Menü reduziert)

Neben den ästhetischen Aspekten habe ich kein technisches Problem gefunden. Auf kleinen Bildschirmen überlappt sich ein großes Logo oder bricht möglicherweise das Ansichtsfenster aus. Bildschirme zwischen 768 und 992 Pixel haben auch andere Probleme, wenn der Inhalt nicht in eine Zeile passt. Siehe beispielsweise: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

Die Standard-Navigationsleiste hat Das Standard-Navigationsleisten-Beispiel fügt einen unteren Rand von 30 Pixel hinzu, sodass der Inhalt Ihrer Navigationsleiste niemals den Inhalt Ihrer Seite überlappen sollte. (Feste Navigationsleisten haben Probleme, wenn die Höhe der Navigationsleiste variiert.)

Sie benötigen einige CSS- und Medienabfragen, um die Navigationsleiste auf verschiedenen Bildschirmgrößen an Ihre Bedürfnisse anzupassen. Bitte versuchen Sie Ihre Frage einzugrenzen. Beschreibe das Problem, das du auf Android gefunden hast.

Update siehe http://bootply.com/77512 für ein Beispiel.

Auf kleineren Bildschirmen wie einem Telefon wird das reduzierte Menü über dem Logo angezeigt

Vertauschen Sie die Schaltfläche und das Logo in Ihrem Code, zuerst das Logo (setzen Sie float: links auf dem Logo)

Es gibt keine Möglichkeit, die Menüelemente an etwas anderem als oben auszurichten

Stellen Sie das margin-topfür ein .navbar-collapse ul. Verwenden Sie die Logo-Höhe minus Navbar-Höhe, um sie nach unten auszurichten, oder (Logo-Höhe - Navbar-Höhe) / 2, um sie zu zentrieren

Anleitung zum Erstellen einer Bootstrap-Navigationsleiste mit einem Logo, das größer als die Standardhöhe (50 Pixel) ist:

Beispiel mit einem Logo 100px x 100px, Standard-CSS:

1. Berechnen Sie die Höhe und (Polsterung oben + Polsterung unten) des Logos. Hier 120px (100px Höhe + Polsterung oben (10px) + Polsterung unten (10px))

2. Gehe zu Bootstrap / Anpassen . Stellen Sie anstelle der Navbar-Höhe 50px> 120px (50 + 70) und der Navbar-Collapse-Max-Höhe von 340px auf 410px (340 + 70) ein. CSS herunterladen .

3. In diesem Beispiel verwende ich diese Navigationsleiste . In der Navbar-Marke :

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...

   füge eine Klasse hinzu, zum Beispiel myLogo , und ein img (dein Logo)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

4. In CSS

   .myLogo {Polsterung: 10px; }}

5. Geeignet für andere Größen.

Beispiel

Nun, ich habe endlich das gleiche Problem gelöst. Hier ist meine Lösung und ich habe sie auf meiner Website in allen drei Hauptbrowsern getestet: Chrome, Firefox und Internet Explorer.

Wenn Sie kein textbasiertes Logo verwenden, entfernen Sie zunächst "navbar-brand" vollständig, da ich festgestellt habe, dass diese bestimmte Klasse die Hauptursache für die Verdoppelung meines reduzierten Navigationsmenüs ist.

Wenden Sie sich an user3137032, um mich in die richtige Richtung zu führen.

Sie müssen einen benutzerdefinierten reaktionsschnellen Bildcontainer erstellen. Ich habe mein "Logo" genannt.

Hier ist das Bootstrap-HTML-Markup:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Und der CSS-Code:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

Der Wert in @media (max-width: x) kann abhängig von der Breite Ihrer Logo-Bilder variieren. Mein Wert beträgt 368px. Abhängig von der Größe Ihres Logos müssen möglicherweise auch die Prozentsätze geändert werden. Die erste @ media-Abfrage sollte Ihr Schwellenwert sein, und meine war die Bildbreite (368 Pixel) + die Größe der reduzierten Schaltflächen (44 Pixel) + etwa 60 Pixel. Sie ergab 480 Pixel. Hier starte ich die reaktionsfähige Bildskalierung.

Bitte entfernen Sie unbedingt meine Rasierersyntax aus den HTML-Abschnitten. Lassen Sie mich wissen, wenn es Ihr Problem behebt, es hat mein Problem behoben.

Bearbeiten: Entschuldigung, ich habe Ihr Problem mit der Höhe der Navigationsleiste verpasst. Es gibt ein paar Möglichkeiten, dies zu tun. Ich persönlich kompiliere den Bootstrap WENIGER mit der entsprechenden Navigationsleistenhöhe. Für meine Zwecke verwende ich 70 Pixel und meine Bildhöhe beträgt 68 Pixel. Die zweite Möglichkeit besteht darin, in der Datei bootstrap.css selbst nach ".navbar" zu suchen und die Mindesthöhe zu ändern: auf die Höhe Ihres Logos.

Meine Lösung ist das Hinzufügen von CSS "display: inline-block" zum img-Tag.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DEMO: jsfiddle

Ich verwende die img-responsive Klasse und setze dann eine maximale Breite für das aElement. So was:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

und das CSS:

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

Sie müssen Code wie folgt verwenden:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

Class of A-Tags müssen "Logo" und keine Navbar-Marke sein.

Dies hängt davon ab, wie groß Ihr Logo sein soll.

Die Standardhöhe <a>in der Navigationsleiste beträgt 20 Pixel. Wenn Sie also height: 20pxauf Ihrem Logo angeben , wird es gut ausgerichtet.

Für ein Logo ist das allerdings etwas klein. Ich habe mich also für Folgendes entschieden:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

Dadurch wird das Bild 30 Pixel groß und das Bild wird vertikal ausgerichtet, indem oben ein negativer Rand hinzugefügt wird (5 Pixel sind die Hälfte des Unterschieds zwischen dem Auffüllen von a und der Größe des Bildes).

Alternativ können Sie die Polsterung des <a>Elements ändern , z.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Schnellkorrektur : Erstellen Sie eine Klasse für Ihre logound setzen Sie die heightauf 28px. Dies funktioniert gut mit der Navigationsleiste auf allen Geräten. Beachten Sie, dass ich sagte, funktioniert "GUT".

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

Mein Ansatz ist es, VIER verschiedene Bilder unterschiedlicher Größe für Telefone, Tablets, Desktops und große Desktops einzuschließen, aber nur EINEN mit den reaktionsfähigen Dienstprogrammklassen von bootstrap wie folgt anzuzeigen:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

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

Anmerkung 2 bearbeiten: Ja, dies fügt Ihrem Server beim Laden der Seite Anforderungen hinzu, die sich möglicherweise etwas verlangsamen. Wenn Sie jedoch eine CSS-Sprite-Hintergrundtechnik verwenden, wird das Logo beim Drucken einer Seite möglicherweise nicht gedruckt, und der obige Code sollte erhalten werden bessere SEO.

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 zum Platzieren des Logos links und Links nach rechts. Diese Navigation reagiert. Nehmen Sie nach Belieben Änderungen vor.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

Ich implementiere es auch über die CSS-Hintergrundeigenschaft. Es funktioniert gesund in jedem Breitenwert.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

Ein anderer Ansatz besteht darin, die integrierte Bootstrap- .text-hideKlasse neben zu implementieren .navbar-brand, 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:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Dies ist eine sehr konsistente Methode und hält Ihr Bild zentriert. Um die Größe des Bildes anzupassen, müssen Sie lediglich die .navbar-brandBreite anpassen, da die Höhe bereits eingestellt ist.

Hier ist eine Live-Demo

Ich hatte das gleiche Problem. Ich habe es so gelöst:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Es gibt keine Navbar-Markenklasse. Das Ergebnis sieht aus wie ein Logo, das in die Navigationsleiste passt und wie ein Link funktioniert. Außerdem empfehle ich, für die Menüelemente die Klasse navbar-right zu verwenden, damit sie nicht unter das Logo fallen.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

Vielleicht ist das zu einfach, aber ich habe gerade die Navbar-Markenzeile kopiert, sodass es zwei davon gibt, das Bild und dann den Text.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

Und ich habe ein Bild erstellt, das in die Navigationsleiste passt (ungefähr die Hälfte der Höhe).

Wenn Sie WENIGER verwenden, funktioniert dies:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

Dieser Code funktioniert perfekt, wenn Sie die Marke zentriert und mit automatischer Breite in der Symbolleiste sehen möchten. Es enthält die Wordpress-Funktion, um die Bilddatei vom richtigen Pfad abzurufen:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

Fügen Sie der .navbar-brandKlasse Folgendes hinzu

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

Mein Arbeitscode - Bootstrap 3.0.3. Wenn Sie die Navigationsleiste umschalten, wird das ursprüngliche Logo des versteckten xs angezeigt.

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

Sie können versuchen, die @ media-Abfrage wie unten zu verwenden.

Fügen Sie zuerst eine Logo-Klasse hinzu und geben Sie dann mit @media die Höhe und Breite Ihres Logos pro Gerätegröße an. Im folgenden Beispiel ziele ich auf Geräte mit einer maximalen Breite von 320 Pixel (iPhone). Sie können damit herumspielen, bis Sie die beste Passform gefunden haben. Einfache Möglichkeit zum Testen: Verwenden Sie Chrom oder Firefox mit Inspect-Element. Verkleinern Sie Ihren Browser so weit wie möglich. Beachten Sie die Änderung der Logo-Größe basierend auf der von Ihnen angegebenen @ media-Maximalbreite. Testen Sie auf iPhone, Android-Geräten, iPad usw., um die gewünschten Ergebnisse zu erzielen.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

Bitte versuchen Sie folgenden Code:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

In meinem Fall funktioniert keine der anderen Antworten (ich habe den Intelligenztest wahrscheinlich nicht bestanden), und nach einigen Experimenten verwende ich Folgendes (was meiner Meinung nach sehr nahe an der Bootstrap-Standardeinstellung liegt):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

Und in der CSS-Datei habe ich Folgendes hinzugefügt:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Beachten Sie, dass dies @Html.ActionLink()die Razor-Syntax für ein <a>Tag ist. Wo es heißt, @Html.ActionLink(...)ersetzen Sie es einfach durch ein entsprechendes <a>Tag. Ebenso dort, wo es heißt, @Url.Action(...)ersetzen Sie es durch eine entsprechende URL ( <a>in diesem Fall kein Tag).

Dies ist keine Semantik, aber ich benutze nur das Vorhandene a Element, setze ein Hintergrundbild und erstelle dann mehrere Variationen für eine Auflösung von 2x, kleinere Bildschirmgrößen usw.

Dann können Sie die verwenden .text-hide Klasse verwenden, um Text auf die alte Art und Weise auf die Seite zu bringen. Einfach und effektiv, wenn auch nicht richtig verwendet.

Hier ist ein Link zur Hilfsklasse zum Ersetzen von Text:

http://getbootstrap.com/css/#helper-classes

Die einfachste und beste Antwort auf diese Frage besteht darin, abhängig von Ihrem Logo eine maximale Breite und Höhe festzulegen. Das Bild ist maximal 50 Pixel hoch, jedoch nicht länger als 200 Pixel.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Dies hängt von Ihrer Logo-Größe und den Elementen der Navigationsleiste ab.

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

Bitte verstehen Sie den Code auf eigene Faust: D Dies ist mein Code-Entwurf und er funktioniert bereits :) Hier ist der Screenshot.

Anstatt das Textbranding zu ersetzen, habe ich mich wie im folgenden Code in zwei Zeilen unterteilt und img-responsivedem Bild eine Klasse gegeben ......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

und zusätzlich habe ich die folgenden CSS-Codes hinzugefügt .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Wenn mein Code Ihr Problem löst, ist es mir ein Vergnügen ...

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>

                   </button>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// Vergiss nicht, Bootstrap im Kopf deines Codes hinzuzufügen.