Pasek startowy 3 Pasek nawigacyjny z logo

Chcę użyć domyślnego paska nawigacyjnego Bootstrap 3 z logo obrazka zamiast znaku tekstowego. Jak to zrobić bez powodowania problemów z różnymi rozmiarami ekranu? Zakładam, że jest to wspólny wymóg, ale nie widziałem jeszcze dobrej próbki kodu. Kluczowym wymogiem oprócz akceptowalnego wyświetlania na wszystkich ekranach jest możliwość zwijania menu na mniejszych ekranach.

Próbowałem po prostu umieścić tag IMG wewnątrz tagu A, który ma klasę marki navbar, ale spowodowało to, że menu nie działało poprawnie na moim telefonie z Androidem. Próbowałem także zwiększyć wysokość klasy pasków nawigacyjnych, ale to wszystko jeszcze bardziej zepsuło.

Nawiasem mówiąc, moje logo jest większe niż wysokość paska nawigacyjnego.

Dlaczego wszyscy próbują to zrobić w trudny sposób? Jasne, niektóre z tych podejść będą działać, ale są bardziej skomplikowane niż to konieczne.

OK, po pierwsze - potrzebujesz obrazu, który zmieści się na pasku nawigacyjnym. Możesz dostosować swój obraz za pomocą atrybutu wysokości css (pozwalającego na skalowanie szerokości) lub możesz po prostu użyć obrazu o odpowiednim rozmiarze. Cokolwiek zdecydujesz się zrobić - to, jak będzie wyglądać, będzie zależeć od tego, jak dobrze dopasujesz rozmiar swojego obrazu.

Z jakiegoś powodu każdy chce wbić obraz w kotwicę navbar-brand, a to nie jest konieczne. navbar-brandstosuje style tekstu, które nie są konieczne do obrazu, a także do navbar-leftklasy (tak jak przeciągnij w lewo, ale do użycia w pasku nawigacyjnym). Wszystko, czego naprawdę potrzebujesz, to dodać navbar-left.

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

Możesz nawet śledzić to za pomocą elementu marki paska nawigacyjnego, który pojawi się po prawej stronie obrazu.

<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>

ZAKOŃCZ DEMO Z WIELE PRZYKŁADÓW

WAŻNA AKTUALIZACJA: 21.12.2015

Obecnie wykryty błąd w Mozilli , który łamie pasek nawigacyjny w niektórych szerokościach przeglądarki za pomocą WIELE DEMOSÓW NA TEJ STRONIE . Zasadniczo błąd mozilli obejmuje lewe i prawe dopełnienie linku marki paska nawigacyjnego jako część szerokości obrazu. Można to jednak łatwo naprawić i przetestowałem to i jestem pewien, że jest to najbardziej stabilny przykład działania na tej stronie. Rozmiar zmieni się automatycznie i działa na wszystkich przeglądarkach.

Po prostu dodaj to do swojego css i użyj navbar-brand w taki sam sposób, jak zrobiłbyś to .img-responsive. Twoje logo zostanie automatycznie dopasowane

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

Inną opcją jest użycie obrazu tła. Użyj obrazu o dowolnym rozmiarze, a następnie ustaw żądaną szerokość:

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

ORYGINALNA ODPOWIEDŹ PONIŻEJ (tylko w celach informacyjnych)

Ludzie często zapominają o dopasowaniu do obiektu. Osobiście uważam, że jest to najłatwiejszy w obsłudze, ponieważ obraz automatycznie dostosowuje się do rozmiaru menu. Jeśli użyjesz tylko dopasowania obiektu na obrazie, automatycznie zmieni on rozmiar na wysokość menu.

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

Zwrócono uwagę, że nie działa to jeszcze w IE „jeszcze”. Istnieje polifill , ale może być nadmierny, jeśli nie planujesz używać go do niczego innego. Wygląda na to, że dopasowanie obiektu jest planowane w przyszłej wersji IE, więc gdy to się stanie, będzie działać we wszystkich przeglądarkach.

Jednakże, jeśli zauważysz klasę reagującą na .img w bootstrap, maksymalna szerokość zakłada, że ​​umieszczasz te obrazy w kolumnach lub coś, co ma wyraźny zestaw. Oznaczałoby to, że 100% w szczególności oznacza 100% szerokość elementu macierzystego.

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

Nie możemy tego używać z paskiem nawigacyjnym, ponieważ element nadrzędny (.navbar-brand) ma stałą wysokość 50 pikseli, ale szerokość nie jest ustawiona.

Jeśli weźmiemy tę logikę i odwrócimy ją, aby była responsywna na podstawie wysokości, możemy uzyskać responsywny obraz, który skaluje się do wysokości marki .navbar, a dodając i automatycznie ustawiając szerokość, dostosuje się do proporcji.

max-height: 100%;
width: auto;

Zwykle musielibyśmy dodać display:block;do scenariusza, ale skoro navbar-brand już ma zmiennoprzecinkowe: left; zastosowane do niego automatycznie działa jak element blokowy.

Możesz natknąć się na rzadką sytuację, w której twoje logo jest zbyt małe. Podejście reagujące na img nie bierze tego pod uwagę, ale my to zrobimy. Dodając również do atrybutu „wysokość” .navbar-brand > imgmożesz mieć pewność, że będzie on skalowany zarówno w górę, jak i w dół.

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

Aby to zakończyć, złożyłem je razem i wydaje się, że działa idealnie we wszystkich przeglądarkach.

<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

Chociaż twoje pytanie jest interesujące, nie oczekuję, że będzie na to jedna odpowiedź. Może twoje pytanie jest zbyt ogólne. Twoje rozwiązanie powinno zależeć od: innej zawartości na pasku nawigacyjnym (liczba elementów), rozmiarów logo, czy logo reaguje na reakcję itp. Dodanie logo do litery a (z marką navbar) wydaje się dobrym punktem wyjścia. Powinienem użyć klasy navbar-brand, ponieważ doda to dopełnienie (góra / dół) 15 pikseli.

Testuję to ustawienie na stronie http://getbootstrap.com/examples/navbar/ z logo 300 x 150 pikseli.

Pełny ekran> 1200:

od 768 do 992 pikseli (menu nie jest zwinięte):

<768 (menu zwinięte)

Oprócz aspektów estetycznych nie znalazłem żadnego problemu technicznego. Na małych ekranach duże logo może się pokrywać lub może wyłamać rzutnię. Ekrany od 768 do 992 pikseli mają również inne problemy, gdy zawartość nie mieści się w linii, patrz na przykład: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

Domyślny pasek nawigacyjny ma Przykład domyślnego paska nawigacyjnego dodaje dolny margines 30px, więc zawartość paska nigdy nie powinna nakładać się na zawartość strony. (stałe paski nawigacji będą miały problemy, gdy wysokość paska nawigacji będzie się zmieniać).

Będziesz potrzebować kilku zapytań css i multimediów, aby dostosować pasek nawigacyjny do swoich potrzeb na różnych rozmiarach ekranu. Spróbuj zawęzić swoje pytanie. opisz problem znaleziony na Androidzie.

aktualizacja patrz http://bootply.com/77512 na przykład.

Na mniejszych ekranach, takich jak telefon, zwinięte menu pojawia się nad logo

zamień przycisk i logo w swoim kodzie, najpierw logo (ustaw pływak: lewy na logo)

Nie ma sposobu, aby wyrównać pozycje menu do czegokolwiek poza górą

ustaw margin-topdla .navbar-collapse ul. Użyj wysokości logo minus wysokość paska nawigacyjnego, aby wyrównać do dołu lub (wysokość logo - wysokość paska nawigacyjnego) / 2, aby wyśrodkować

Instrukcja tworzenia paska nawigacyjnego bootstrap z logo większym niż domyślna wysokość (50 pikseli):

Przykład z logo 100px x 100px, standardowy CSS:

1. Oblicz wysokość i (góra wypełnienia + dół wypełnienia) logo. Tutaj 120 pikseli (wysokość 100 pikseli + góra wypełnienia (10 pikseli) + spód wypełnienia (10 pikseli))

2. Idź do bootstrap / dostosuj . Ustaw zamiast wysokości paska nawigacyjnego 50px> 120px (50 + 70) i zawinięcia-max-wysokość paska od 340px do 410px (340 + 70). Pobierz css.

3. W tym przykładzie używam tego paska nawigacyjnego . W pasku nawigacyjnym :

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

   dodaj klasę, na przykład myLogo i img (twoje logo)

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

4. Dodaj CSS

   .myLogo {padding: 10px; }

5. Odpowiednie do innych rozmiarów.

Przykład

Cóż, w końcu udało mi się uruchomić ten sam problem, oto moje rozwiązanie i przetestowałem je na swojej stronie we wszystkich trzech głównych przeglądarkach: Chrome, Firefox i Internet Explorer.

Przede wszystkim, jeśli nie używasz logo tekstowego, usuń całkowicie „navbar-brand”, ponieważ uznałem, że ta konkretna klasa jest główną przyczyną podwojenia menu nawigacyjnego.

Krzycz do użytkownika 3137032 za poprowadzenie mnie we właściwym kierunku.

Musisz stworzyć niestandardowy responsywny pojemnik na zdjęcia, nazwałem moje „logo”

Oto znacznik HTML ładowania początkowego:

<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>

I kod CSS:

.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%;
}
}

Wartość w @media (max-width: x) może się różnić w zależności od szerokości obrazów twojego logo, moje to 368px. Wartości procentowe mogą również wymagać zmiany w zależności od rozmiaru logo. Pierwsze zapytanie @media powinno być twoim progiem, a mój miał szerokość obrazu (368px) + zwinięty rozmiar przycisku (44px) + około 60px i wyszło na 480px, od tego momentu rozpoczynam responsywne skalowanie obrazu.

Pamiętaj, aby usunąć moją składnię maszynki do golenia z części HTML. Daj mi znać, jeśli to naprawi twój problem, naprawi mój.

Edytuj: Przepraszam, brakowało mi problemu z wysokością paska nawigacyjnego. Jest na to kilka sposobów, osobiście kompiluję Bootstrap LESS z odpowiednią wysokością paska nawigacyjnego, do moich celów używam 70px, a moja wysokość obrazu to 68 px. Drugi sposób to zrobić w samym pliku bootstrap.css, wyszukaj „.navbar” i zmień min-height: na wysokość swojego logo.

Moim rozwiązaniem jest dodanie css „display: inline-block” do tagu img.

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

DEMO: jsfiddle

Używam klasy reagującej na img, a następnie ustawiam maksymalną szerokość aelementu. Lubię to:

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

i CSS:

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

Musisz użyć kodu w następujący sposób:

<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>

Tag klasy A musi być „logo”, a nie marką navbar.

To zależy od tego, jak wysokie ma być twoje logo.

Domyślna <a>wysokość na pasku nawigacyjnym wynosi 20px, więc jeśli określisz to height: 20pxna swoim logo, będzie się ładnie wyrównywać.

Jest to jednak trochę małe logo, więc wybrałem to:

<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>

To sprawia, że ​​obraz ma 30 pikseli wysokości i wyrównuje obraz w pionie, dodając ujemny margines na górze (5 pikseli to połowa różnicy między dopełnieniem a a rozmiarem obrazu).

Alternatywnie możesz zmienić wypełnienie <a>elementu, np .:

<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>

Szybka poprawka : Utwórz klasę dla siebie logoi ustaw wartość heightna 28px. Działa to dobrze z paskiem nawigacyjnym na wszystkich urządzeniach. Zauważ, że powiedziałem, że działa „WELL”.

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

Moje podejście polega na uwzględnieniu CZTERECH różnych obrazów o różnych rozmiarach dla telefonów, tabletów, komputerów stacjonarnych, dużych komputerów stacjonarnych, ale pokazuję JEDEN, używając responsywnych klas narzędzi bootstrap, w następujący sposób:

<!--<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>

Uwaga: Skomentowany wiersz można zastąpić podanym kodem. Zamień kod php, jeśli nie używasz wordpress.

Edytuj Uwaga 2: Tak, to dodaje żądania do serwera podczas ładowania strony, co może nieco spowolnić, ale jeśli używasz techniki sprite css w tle, istnieje prawdopodobieństwo, że logo nie zostanie wydrukowane podczas drukowania strony, a powyższy kod powinien otrzymać lepsze SEO.

Nie powinieneś dodawać dodatkowego CSS, ponieważ Bootstrap3 to zapewnia. Chyba że chcesz to dodać. To jest mój kod umieszczania logo po lewej stronie i linków po prawej stronie. Ta nawigacja jest responsywna. Wprowadź zmiany zgodnie z potrzebami.

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>

Zaimplementowałem to również za pomocą właściwości tła css. Działa zdrowo przy dowolnej wartości szerokości.

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

Innym podejściem jest zaimplementowanie wbudowanej .text-hideklasy Bootstrap wraz z .navbar-brandzastąpieniem tekstu / treści marki obrazem tła.

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>

Jest to bardzo spójna metoda, która utrzymuje obraz w centrum. Aby dopasować rozmiar obrazu, wystarczy dopasować .navbar-brandszerokość, ponieważ wysokość jest już ustawiona.

Oto demo na żywo

Miałem ten sam problem. Rozwiązałem to w ten sposób:

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

Nie ma klasy marki paska nawigacyjnego. Wynik wygląda jak obraz logo, który pasuje do paska nawigacyjnego i działa jak link. Polecam także użycie odpowiedniej klasy paska nawigacyjnego dla elementów menu, aby nie schodziły poniżej logo.

<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>

Może to jest zbyt proste, ale właśnie skopiowałem linię marki paska nawigacyjnego, więc są dwie, obraz, a następnie tekst.

<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>

I stworzyłem obraz, który mieści się w pasku nawigacyjnym (około 1/2 wysokości).

Jeśli używasz LESS, działa to:

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

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

Ten kod działa idealnie, jeśli chcesz zobaczyć markę wyśrodkowaną z automatyczną szerokością na pasku narzędzi. Zawiera funkcję Wordpress, aby pobrać plik obrazu z właściwej ścieżki:

<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">

Dodaj następujące elementy do .navbar-brandklasy

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

mój działający kod - bootstrap 3.0.3. podczas przełączania paska nawigacyjnego oryginalny obraz ukrytego xs.

    <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>

Możesz spróbować użyć zapytania @media, takiego jak poniżej.

Najpierw dodaj klasę logo, a następnie użyj @media, aby określić wysokość i szerokość logo w zależności od rozmiaru urządzenia. W poniższym przykładzie kieruję reklamy na urządzenia o maksymalnej szerokości 320 pikseli (iPhone). Możesz się tym bawić, dopóki nie znajdziesz najlepszego dopasowania. Łatwy sposób przetestowania: użyj Chrome lub Firefox z elementem inspekcji. Zmniejsz przeglądarkę tak daleko, jak to możliwe. Obserwuj zmianę rozmiaru logo na podstawie podanej maksymalnej szerokości @media. Przetestuj na telefonie iPhone, urządzeniach z Androidem, iPadzie itp., Aby uzyskać pożądane wyniki.

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

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

Wypróbuj następujący kod:

<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>

Nie udało mi się sprawić, by którakolwiek z pozostałych odpowiedzi zadziałała w moim przypadku (prawdopodobnie nie zdałem testu inteligencji) i po pewnym eksperymencie używam tego (co moim zdaniem jest bardzo zbliżone do domyślnego Bootstrap):

   <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>

W pliku CSS dodałem:

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

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Zauważ, że @Html.ActionLink()jest to składnia Razor dla <a>znacznika. Tam, gdzie jest napisane, @Html.ActionLink(...)po prostu zamień go na odpowiedni <a>tag. Podobnie, gdy mówi, @Url.Action(...)zamień go na odpowiedni adres URL ( <a>w tym przypadku brak tagu).

To nie jest semantyczne, ale po prostu używam istniejącego aelementu, ustawiam obraz tła, a następnie tworzę wiele odmian dla rozdzielczości @ 2x, mniejszych rozmiarów ekranu itp.

Następnie możesz użyć tej .text-hideklasy, aby uzyskać modny tekst na stronie. Proste i skuteczne, choć niewłaściwe użycie obrazu.

Oto link do klasy pomocniczej do zamiany tekstu:

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

Najłatwiejszą i najlepszą odpowiedzią na to pytanie jest ustawienie maksymalnej szerokości i wysokości w zależności od logo, wysokość obrazu będzie wynosić maksymalnie 50 pikseli, ale nie dłużej niż 200 pikseli.

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

Różni się to w zależności od rozmiaru logo i posiadanych elementów paska nawigacyjnego.

<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>

Proszę zrozumieć kod we własnym zakresie: D To jest mój szkic i już działa :) Oto zrzut ekranu.

Zamiast zastąpienia znakowania tekstem podzieliłem się na dwa wiersze, jak w poniższym kodzie i nadałem img-responsiveklasie obraz ...

<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" -->

a ponadto dodałem następujące kody css .......

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

Jeśli mój kod rozwiązuje problem, to z przyjemnością .....

 <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>

// Nie zapomnij dodać bootstrap w nagłówku kodu.