it-swarm.com.de

Bootstrap 3 Navigationsleiste mit Logo

Ich möchte die Standardnavigationsleiste Bootstrap 3 mit einem Bildlogo anstelle von Textbranding verwenden. Was ist die richtige Methode, um Probleme mit unterschiedlichen Bildschirmgrößen zu vermeiden? Ich gehe davon aus, dass dies eine häufige Anforderung ist, aber ich habe noch kein gutes Codebeispiel gesehen. Eine wichtige Anforderung, die sich von einer akzeptablen Anzeige auf allen Bildschirmgrößen unterscheidet, ist die Menüausblendung auf kleineren Bildschirmen.

Ich habe versucht, ein IMG-Tag in das A-Tag mit der Klasse navbar-brand zu setzen, aber das Menü funktioniert auf meinem Android Telefon nicht richtig. Ich habe auch versucht, die Höhe der Navbar-Klasse zu erhöhen, aber das hat die Sache noch schlimmer gemacht.

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

366
stepanian

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

OK, zuerst - Sie benötigen ein Bild, das in Ihre Navigationsleiste passt. Sie können Ihr Bild über das CSS-Höhenattribut anpassen (wobei die Breite skaliert werden kann) oder Sie können einfach ein Bild mit der entsprechenden Größe verwenden. Was auch immer Sie sich entscheiden - die Art und Weise, wie dies aussieht, hängt davon ab, wie gut Sie Ihr Bild dimensionieren.

Aus irgendeinem Grund möchte jeder das Bild mit navbar-brand in einen Anker stecken, und dies ist nicht erforderlich. navbar-brand wendet Textstile an, die für ein Bild nicht erforderlich sind, sowie die navbar-left -Klasse (genau wie pull-left, jedoch zur Verwendung in einer Navigationsleiste). Alles, was Sie wirklich brauchen, ist navbar-left hinzuzufügen.

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

Sie können dem sogar einen Artikel der Marke navbar hinzufügen, der rechts neben dem Bild angezeigt wird.

411
Michael
<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>
147
Vicky

Bootstrap 3 navbar logo resizing

DEMO BEENDEN MIT VIELEN BEISPIELEN

WICHTIGES UPDATE: 21.12.15

Derzeit gibt es einen Fehler in Mozilla Ich habe festgestellt, dass die Navigationsleiste bei bestimmten Browserbreiten mit VIELEN DEMOS AUF DIESER SEITE unterbrochen wird. Grundsätzlich beinhaltet der Mozilla-Bug das linke und rechte Auffüllen des Links der Marke navbar als Teil der Bildbreite. Dies kann jedoch leicht behoben werden, und ich habe es getestet und bin mir ziemlich sicher, dass es das stabilste Arbeitsbeispiel auf dieser Seite ist. Die Größe wird automatisch angepasst und funktioniert in allen Browsern.

Fügen Sie dies einfach zu Ihrem CSS hinzu und verwenden Sie navbar-brand auf die gleiche Weise wie .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;
}


URSPRÜNGLICHE 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, weil 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 an die Höhe des Menüs angepasst.

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

Es wurde darauf hingewiesen, dass dies in IE "noch nicht funktioniert". Es gibt ein polyfill , aber das kann übertrieben sein, wenn Sie nicht vorhaben, es für irgendetwas anderes zu verwenden. Es sieht so aus, als wäre die Objektanpassung in Planung für eine zukünftige Version von IE. Sobald dies geschieht, funktioniert dies in allen Browsern.

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

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

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

Wenn wir diese Logik annehmen und umkehren , um auf der Grundlage der Höhe reaktionsfähig zu sein, können wir ein reaktionsfähiges Bild erhalten, das auf die Höhe der Marke .navbar und von skaliert wird Durch Hinzufügen und automatisches Einstellen der Breite wird die Proportion angepasst.

max-height: 100%;
width: auto;

Normalerweise müssten wir display:block; zum Szenario hinzufügen, aber da navbar-brand bereits float hat: left; Wird es angewendet, fungiert es automatisch als Blockelement.


Sie können in die seltene Situation geraten, in der Ihr Logo zu klein ist. Der img-responsive Ansatz berücksichtigt dies nicht, aber wir werden es tun. Indem Sie dem .navbar-brand > img auch das Attribut "height" hinzufügen, 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 zusammengefügt 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>

DEMOhttp://codepen.io/bootstrapped/pen/KwYGwq

71
Bryan Willis

Obwohl Ihre Frage interessant ist, erwarte ich nicht, dass es eine Antwort dafür gibt. Vielleicht ist Ihre Frage zu weit gefasst. Ihre Lösung sollte davon abhängen: anderer Inhalt in der Navigationsleiste (Anzahl der Elemente), Größe Ihres Logos, Reaktion Ihres Logos usw. Das Hinzufügen des Logos in a (mit Navigationsleisten-Marke) scheint ein guter Ausgangspunkt zu sein. Ich sollte die Klasse navbar-brand verwenden, da hierdurch ein Abstand (oben/unten) von 15 Pixeln hinzugefügt wird.

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

Vollbild> 1200:

enter image description here

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

enter image description here

<768 (Menü ausgeblendet)

enter image description here

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

Die Standard-Navigationsleiste hat Im Beispiel für die Standardnavigationsleiste wird ein unterer Rand von 30 Pixel hinzugefügt, sodass sich der Inhalt der Navigationsleiste niemals mit dem Inhalt Ihrer Seite überschneidet. (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. Sein. Beschreiben Sie das Problem, das Sie auf Android gefunden haben.

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

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

vertausche den Button und das Logo in deinem Code, zuerst das Logo (setze float: links auf dem Logo)

Es gibt keine Möglichkeit, die Menüelemente auf etwas anderes als top auszurichten

stellen Sie den margin-top für .navbar-collapse ul ein. Verwenden Sie die Logo-Höhe abzüglich der Höhe der Navigationsleiste, um sie nach unten auszurichten, oder (Logo-Höhe - Höhe der Navigationsleiste)/2 zur Mitte

23
Bass Jobsen

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 von die Höhe der Navigationsleiste 50px> 120px (50 + 70) und ein Maximale Höhe der Navigationsleiste von 340 Pixel bis 410 Pixel (340+) 70). Laden Sie CSS herunter.

  3. In diesem Beispiel verwende ich diese navbar . In navbar-brand :

      <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 (Ihr Logo)

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

  4. Füge CSS hinzu

    .myLogo {padding: 10px; }

  5. Passend zu anderen Größen.

Beispiel

21
Sun

Nun, ich habe endlich das gleiche Problem zum Laufen gebracht. 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 diese bestimmte Klasse als Hauptursache für die Verdoppelung meines reduzierten Navigationsmenüs angesehen habe.

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

Sie müssen einen benutzerdefinierten reaktionsschnellen Bildcontainer erstellen, den ich "Logo" nannte.

Hier ist die bootstrap HTML-Markierung:

<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 (maximale Breite: x) kann abhängig von der Breite Ihrer Logo-Bilder variieren. Meins ist 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 Bildbreite (368px) + reduzierte Schaltflächengröße (44px) + ca. 60px und ergab 480px. Hier starte ich die reaktionsschnelle Bildskalierung.

Bitte achten Sie darauf, meine Rasiermessersyntax aus den HTML-Abschnitten zu entfernen. Lassen Sie mich wissen, ob es Ihr Problem behebt, es behebt meins.

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

14
Derek Williams

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

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

DEMO: jsfiddle

14
Kuofp

Ich verwende die Klasse img-responsive und setze dann eine maximale Breite für das a -Element. 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%;
}
13
dustinfarris

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>

Klasse-A-Tags müssen "Logo" sein, keine Navbar-Marke.

5
NurlanXp

Schnellkorrektur: Erstellen Sie eine Klasse für logo und setzen Sie height auf 28px. Dies funktioniert gut mit der Navigationsleiste auf allen Geräten. Beachten Sie, dass ich sagte, funktioniert "gut".

.logo {
  display:block;
  height:28px;
}
4
Brian Scramlin

Es hängt davon ab, wie hoch Ihr Logo sein soll.

Die <a> Standardhöhe in der Navigationsleiste beträgt 20px. Wenn Sie also height: 20px in Ihrem Logo angeben, wird die Ausrichtung entsprechend angepasst.

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

<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 30px groß und vertikal ausgerichtet, indem ein negativer Rand am oberen Rand hinzugefügt wird (5px entspricht der Hälfte des Unterschieds zwischen dem Auffüllen von a und der Größe des Bildes).

Alternativ können Sie die Auffüllung für das <a> -Element ä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>
4
cwohlman

Mein Ansatz ist es, VIER verschiedene Bilder in verschiedenen Größen für Telefone, Tablets, Desktops und große Desktops einzubeziehen, aber nur EIN Bild mit den entsprechenden Dienstprogrammklassen von bootstrap anzuzeigen, wie folgt:

<!--<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 WordPress nicht verwenden.

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

3
vascorola

Ein anderer Ansatz ist die Implementierung von Bootstraps eingebauter .text-hide -Klasse neben .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, die Ihr Bild zentriert. Um die Größe des Bildes anzupassen, müssen Sie nur die Breite von .navbar-brand anpassen, da die Höhe bereits eingestellt ist.

Hier ist eine Live-Demo

2
Bryan Willis

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 zur 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>
2
margin

Ich implementiere es auch über CSS Hintergrundeigenschaft. Es funktioniert bei jedem Wert für die Breite.

.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
}
2
crx4

Vielleicht ist das zu einfach, aber ich habe gerade die Zeile mit der Marke navbar 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).

1
twiddly

Wenn Sie WENIGER verwenden, funktioniert dies wie folgt:

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

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

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 der Links rechts. Diese Navigation reagiert. Nehmen Sie die gewünschten Ä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>
1
Krista A.

Dieser Code funktioniert perfekt, wenn die Marke zentriert und mit automatischer Breite in der Symbolleiste angezeigt werden soll. Es enthält die Funktion Wordpress, 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">
1
Taras Vovkovych

Anstatt das Text-Branding zu ersetzen, habe ich mich wie im folgenden Code in zwei Zeilen geteilt und dem Bild die Klasse img-responsive 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 .....

0
I.Z

Sie können versuchen, die @ media-Abfrage wie folgt 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 320px (iPhone). Sie können damit herumspielen, bis Sie die beste Anpassung gefunden haben. Einfache Möglichkeit zum Testen: Verwenden Sie chrome 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 maximalen @media-Breite. 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;
}
}
0
user3137032

Die einfachste und beste Antwort auf diese Frage ist das Festlegen einer maximalen Breite und Höhe in Abhängigkeit von Ihrem Logo. 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 der Größe Ihres Logos und den verfügbaren Navigationsleistenelementen ab.

0
Theo Leinad

In meinem Fall funktioniert keine der anderen Antworten (ich habe den Intelligenztest wahrscheinlich nicht bestanden). Nach einigen Experimenten verwende ich diese Lösung (die meiner Meinung nach sehr nahe am Bootstrap liegt). Standard):

   <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 @Html.ActionLink() die Rasiermessersyntax für ein <a> -Tag ist. Dort, wo @Html.ActionLink(...) steht, ersetzen Sie es einfach durch ein entsprechendes <a> -Tag. Ersetzen Sie es dort, wo @Url.Action(...) steht, durch eine entsprechende URL (in diesem Fall kein <a> -Tag).

0
Manfred

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>
0
Dhaval Solanki
<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.

enter image description here

0
LYKS

mein Arbeitscode - bootstrap 3.0.3. Wenn Sie mit der Navigationstaste umschalten, wird das ursprüngliche Logo von hidden-x 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>
0
OpenCode

Dies ist keine Semantik, sondern ich verwende einfach das vorhandene a -Element, setze ein Hintergrundbild und erstelle dann mehrere Variationen für @ 2x Auflösung, kleinere Bildschirmgrößen usw.

Dann können Sie die .text-hide -Klasse verwenden, um Text auf der Seite auf die alte Art und Weise abzurufen. Einfach und effektiv, obwohl ein Bild nicht richtig verwendet wird.

Hier ist ein Link zur Hilfsklasse für das Ersetzen von Text:

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

0
Ken Prince