Logo ile Bootstrap 3 Navbar

Bootstrap 3 varsayılan gezinme çubuğunu metin markası yerine resim logolu kullanmak istiyorum. Farklı ekran boyutlarında herhangi bir soruna neden olmadan bunu yapmanın uygun yolu nedir? Bu ortak bir gereksinimi varsayalım, ama henüz iyi bir kod örneği görmedim. Tüm ekran boyutlarında kabul edilebilir bir görüntü göstermekten başka önemli bir gereklilik, daha küçük ekranlarda menü daraltılabilirliğidir.

Navbar marka sınıfına sahip A etiketinin içine bir IMG etiketi koymayı denedim, ancak menünün android telefonumda düzgün çalışmamasına neden oldu. Ayrıca navbar sınıfının yüksekliğini artırmayı denedim, ama bu işleri daha da kötüleştirdi.

Bu arada, logo resmim gezinme çubuğunun yüksekliğinden daha büyük.

Neden herkes bunu zor yoldan yapmaya çalışıyor? Elbette, bu yaklaşımlardan bazıları işe yarayacak, ancak gerekenden daha karmaşık.

Tamam, önce - navbar'ınıza sığacak bir resme ihtiyacınız var. Görüntünüzü css yükseklik özelliği ile ayarlayabilirsiniz (genişliğin ölçeklenmesine izin verir) veya yalnızca uygun boyutta bir görüntü kullanabilirsiniz. Ne yapmaya karar verirseniz verin, bunun görünüşü görüntünüzü ne kadar iyi boyutlandırdığınıza bağlı olacaktır.

Bazı nedenlerden dolayı, herkes görüntüyü bir çapanın içine yapıştırmak ister navbar-brandve bu gerekli değildir. sınıfın navbar-brandyanı sıra görüntüye gerekli olmayan metin stillerini de uygular navbar-left(tıpkı sola, ancak gezinme çubuğunda kullanmak için). İhtiyacınız olan tek şey eklemektir navbar-left.

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

Bunu, görüntünün sağında görünecek bir navbar markasıyla bile takip edebilirsiniz.

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

BİRÇOK ÖRNEK İLE TAM DEMO

ÖNEMLİ GÜNCELLEME: 12/21/15

Şu anda Mozilla'da , BU SAYFADAKİ BİRÇOK DEMOS ile belirli tarayıcı genişliklerinde gezinme çubuğunu kıran bir hata var . Temel olarak mozilla böceği, görüntü genişliğinin bir parçası olarak navbar marka bağlantısında sol ve sağ dolgu içerir. Ancak, bu kolayca düzeltilebilir ve bunu test ettim ve bu sayfadaki en kararlı çalışma örneği olduğundan oldukça eminim. Otomatik olarak yeniden boyutlandırılır ve tüm tarayıcılarda çalışır.

Bunu css'nize ekleyin ve navbar markasını kullandığınız gibi kullanın .img-responsive. Logonuz otomatik olarak sığacak

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

Başka bir seçenek de arka plan görüntüsü kullanmaktır. Herhangi bir boyutta bir görüntü kullanın ve sonra istediğiniz genişliği ayarlayın:

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

AŞAĞIDAKİ ORİJİNAL CEVAP (sadece referans içindir)

İnsanlar nesneye uymayı çok unutuyor gibi görünüyor. Kişisel olarak bunun en kolayı olduğunu düşünüyorum çünkü görüntü otomatik olarak menü boyutuna göre ayarlanıyor. Görüntü üzerinde yalnızca nesne sığdırma özelliğini kullanırsanız, menülerin yüksekliğine otomatik olarak yeniden boyutlandırılır.

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

Bunun IE'de "henüz" çalışmadığı belirtildi. Bir çoklu dolgu var , ancak başka bir şey için kullanmayı planlamıyorsanız bu aşırı olabilir. Nesne sığdırma IE'nin gelecekteki bir sürümü için planlanıyor gibi görünüyor, böylece bir kez bu tüm tarayıcılarda çalışır.

Ancak, bootstrap içindeki .img-Responsive sınıfını fark ederseniz, max-width bu görüntüleri sütunlara veya set ile açık olan bir şeye koyduğunuzu varsayar. Bu,% 100'ün spesifik olarak ana elemanın% 100 genişliği anlamına geldiği anlamına gelir.

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

Bunu navbar ile kullanamamamızın nedeni, üst öğenin (.navbar-brand) sabit yüksekliğinin 50 piksel olması, ancak genişliğin ayarlanmamış olmasıdır.

Eğer bu mantığı alıp yüksekliğe göre duyarlı olacak şekilde tersine çevirirsek, .navbar marka yüksekliğine ölçeklenen duyarlı bir görüntüye sahip olabilir ve genişliği ekleyip otomatik olarak ayarlayarak orantıya göre ayarlanır.

max-height: 100%;
width: auto;

Genellikle display:block;senaryoya eklememiz gerekir, ancak navbar markasının halihazırda yüzdüğü için: sol; uygulandığında, otomatik olarak bir blok elemanı görevi görür.

Logonuzun çok küçük olduğu nadir durumlarla karşılaşabilirsiniz. IMG'ye duyarlı yaklaşım bunu dikkate almaz, ama yapacağız. Ayrıca, "height" niteliğini ekleyerek, .navbar-brand > imgaşağı ve yukarı ölçekleneceğinden emin olabilirsiniz.

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

Bunu tamamlamak için ikisini bir araya getirdim ve tüm tarayıcılarda mükemmel çalışıyor gibi görünüyor.

<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

Sorunuz ilginç olmasına rağmen bunun için bir cevap olacağını beklemiyorum. Belki sorunuz çok geniş. Çözümünüz şunlara bağlı olmalıdır: gezinme çubuğundaki diğer içerik (öğe sayısı), logonuzun boyutları, logonuz duyarlı davranıyorsa, vb. Navbar marka sınıfını kullanmalıyım çünkü bu 15 piksellik bir dolgu (üst / alt) ekleyecektir.

Bu ayarı http://getbootstrap.com/examples/navbar/ adresinde 300x150 piksel logo ile test ediyorum .

Tam ekran> 1200:

768 ile 992 piksel arasında (menü daraltılmamış):

<768 (menü daraltılmış)

Estetik yönlerinin yanı sıra teknik bir sorun da bulamadım. Küçük ekranlarda belki büyük bir logo üst üste binebilir veya görünümü bozabilir. İçerik bir satıra sığmadığında 768 ve 992 piksel arasındaki ekranlarda başka sorunlar da vardır, örneğin bakınız: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

Varsayılan gezinme çubuğu vardır Varsayılan gezinme çubuğu örneği 30 piksellik bir alt kenar boşluğu ekler, böylece gezinme çubuğunuzun içeriği hiçbir zaman sayfanızın içeriğiyle çakışmamalıdır. (navbarın yüksekliği değiştiğinde sabit navbar'lar sorun yaşayacaktır).

Gezinme çubuğunu farklı ekran boyutlarında ihtiyaçlarınıza göre uyarlamak için bazı css ve medya sorgularına ihtiyacınız olacaktır. Lütfen sorunuzu daraltmaya çalışın. android bulduğunuz sorunu açıklamak.

güncelleme için bkz. http://bootply.com/77512 .

Telefon gibi daha küçük ekranlarda, logonun üstünde daraltılmış menü görünür

kodunuzdaki düğmeyi ve logoyu değiştirin, önce logo (şamandırayı ayarlayın: logoda solda)

Menü öğelerini üst kısımdan başka bir şeye hizalamanın bir yolu yoktur

set margin-topiçin .navbar-collapse ul. Dibe hizalamak için logo yüksekliği eksi gezinme yüksekliği veya merkeze (logo yüksekliği - gezinme yüksekliği) / 2

Varsayılan yükseklikten (50 piksel) daha büyük bir logoya sahip bir bootstrap navbar oluşturma talimatı:

Logolu 100 piksel x 100 piksel, standart CSS örneği :

1. Logonun yüksekliğini ve (dolgu üstü + dolgu tabanı) hesaplayın. Burada 120 piksel (100 piksel yükseklik + dolgu üst (10 piksel ) + dolgu alt (10 piksel ))

2. Bootstrap / özelleştir'e git . Yerine ayarlama Navbar yüksekliği 50 piksel> 120 piksel (50 + 70) ve Navbar'ın çökmesi-maks-boy 340px ila 410 piksel (340 + 70). Css dosyasını indirin .

3. Bu örnekte bu gezinme çubuğunu kullanıyorum . In navbar-marka :

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

   bir sınıf ekleyin , örneğin myLogo ve bir img (logonuz)

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

4. Ekle CSS

   .myLogo {dolgu: 10 piksel; }

5. Diğer boyutlar için yeterli.

Misal

Nihayet aynı problemi çalıştırdım, işte benim çözümüm ve üç büyük tarayıcıda da sitemde test ettim: Chrome, Firefox ve Internet Explorer.

Öncelikle metin tabanlı bir logo kullanmıyorsanız, o zaman bu özel sınıfı daraltılmış nav menümün iki katına çıkmasının ana nedeni olarak bulduğumdan "navbar-brand" ı tamamen kaldırın.

Beni doğru yönde yönlendirmek için user3137032'ye seslen.

Özel bir duyarlı görüntü kabı yapmalısınız, benim "logo" olarak adlandırdım

İşte bootstrap HTML işaretlemesi:

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

Ve CSS kodu:

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

@Media (max-width: x) içindeki değer logo resimlerinizin genişliğine bağlı olarak değişebilir, benimki 368 pikseldir. Logonuzun boyutuna bağlı olarak yüzdelerin de değiştirilmesi gerekebilir. İlk @ medya sorgusu eşik olmalı ve benimki resim genişliği (368px) + daraltılmış düğme boyutu (44px) + yaklaşık 60px ve yanıt veren görüntü ölçeklemesini başlattığım 480px'e çıktı.

Lütfen ustura sözdizimi HTML bölümlerinden kaldırdığınızdan emin olun. Sorununuzu düzeltirse bana bildirin, benimkini düzelttim.

Edit: Üzgünüm, navbar yükseklik sorununu özledim. Bunun için birkaç yol var, kişisel olarak Bootstrap LESS'i uygun navbar yüksekliği ile derliyorum, benim için 70 piksel kullanıyorum ve görüntü yüksekliğim 68 piksel. Bunu yapmanın ikinci yolu bootstrap.css dosyasının kendisidir, ".navbar" için arama yapın ve minimum yüksekliği değiştirin: logonuzun yüksekliğine.

Benim çözüm img etiketi css "display: inline-block" eklemek.

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

DEMO: jsfiddle

Img-duyarlı sınıf kullanın ve sonra aöğe üzerinde bir maksimum genişlik ayarlayın . Bunun gibi:

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

ve CSS:

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

Kodu şu şekilde kullanmalısını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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

A sınıfı etiketi navbar markası değil "logo" olmalıdır.

Logonuzun ne kadar uzun olmasını istediğinize bağlıdır.

<a>Gezinme çubuğundaki varsayılan yükseklik 20 pikseldir, bu nedenle height: 20pxlogonuzda belirtirseniz güzel bir şekilde hizalanır.

Ancak bu bir logo için küçük, bu yüzden seçtiğim şuydu:

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

Bu, görüntüyü 30 piksel boyunda yapar ve üst tarafa negatif kenar boşluğu ekleyerek görüntüyü dikey olarak hizalar (5 piksel a ve dolgu boyutu arasındaki farkın yarısıdır).

Alternatif olarak, <a>eleman üzerindeki dolguyu değiştirebilirsiniz , örneğin:

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

Quick Fix : şunlara ait bir sınıf oluşturun logove set heightiçin 28px. Bu, tüm cihazlarda gezinme çubuğu ile iyi çalışır. Dikkat "WELL" çalışır dedim.

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

Benim yaklaşımım telefonlar, tablet, masaüstü, büyük masaüstü için farklı boyutlarda DÖRT farklı görüntü dahil etmektir, ancak aşağıdaki gibi bootstrap'ın duyarlı yardımcı sınıflarını kullanarak yalnızca BİR tane göstermektir:

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

Not: Yorum yapılan satırı verilen kodla değiştirebilirsiniz. WordPress kullanmıyorsanız php kodunu değiştirin.

Not 2'yi düzenleyin: Evet, bu, sayfayı yüklerken sunucunuzu biraz yavaşlatabilecek istekleri ekler, ancak bir arka plan css sprite tekniği kullanıyorsanız, bir sayfa yazdırılırken logo yazdırılmaz ve yukarıdaki kodun alması gerekir daha iyi SEO.

Bootstrap3 bunu sağladığı için ek CSS eklemenize gerek yoktur. Eklemek istemediğiniz sürece. Bu, logoyu sola ve sağa bağlayan kodum. Bu gezinme duyarlı. Uygun gördüğünüzde değişiklik yapın.

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>

Ben de css background özelliği ile uygulamak. Her genişlik değerinde sağlıklı çalışır.

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

Başka bir yaklaşım, marka metnini / içeriğini bir arka plan resmiyle değiştirmenin yanı sıra Bootstrap'ın yerleşik .text-hidesınıfını uygulamaktır .navbar-brand.

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>

Bu çok tutarlı bir yöntemdir ve görüntünüzü ortalar. Görüntünün boyutunu ayarlamak için .navbar-brand, yükseklik ayarlanmış olduğundan tek yapmanız gereken genişliği ayarlamaktır.

İşte canlı bir demo

Ben de aynı problemi yaşadım. Ben böyle çözdüm:

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

Navbar markası yoktur. Sonuç, navbar'a uyan ve bir bağlantı gibi çalışan logo resmine benziyor. Ayrıca logonun altına gitmeyecek şekilde menü öğeleri için navbar sağ sınıfı kullanmanızı tavsiye ederim.

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

Belki bu çok basit, ama navbar marka çizgisini kopyaladım, bu yüzden ikisi, görüntü ve sonra metin var.

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

Ve navbarın içine uyan bir görüntü oluşturdum (kabaca 1/2 yükseklikte).

Daha az kullanıyorsanız, bu işe yarar:

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

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

Bu kod, markayı ortalanmış olarak ve araç çubuğunda otomatik genişlikle görmeniz gerektiğinde mükemmel çalışır. Görüntü dosyasını doğru yoldan almak için Wordpress işlevini içerir:

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

.navbar-brandSınıfa aşağıdakileri ekleyin

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

çalışma kodum - bootstrap 3.0.3. navbar-toggle, hidden-xs orijinal logo resmi.

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

Aşağıdaki gibi @media sorgusunu kullanmayı deneyebilirsiniz.

Önce bir logo sınıfı ekleyin, ardından cihaz boyutuna göre logo yüksekliğinizi ve genişliğinizi belirtmek için @media kullanın. Aşağıdaki örnekte, maksimum 320 piksel (iPhone) genişliğe sahip cihazları hedefliyorum. En uygun olanı bulana kadar bununla oynayabilirsiniz. Test etmenin kolay yolu: Inspect element ile chrome veya Firefox kullanın. Tarayıcınızı olabildiğince küçültün. Belirttiğiniz @ medya maksimum genişliğine bağlı olarak logo boyutu değişikliğine dikkat edin. İstenilen sonuçları almak için iPhone, android cihazlar, iPad vb.

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

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

Lütfen aşağıdaki kodu deneyin:

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

Benim durumumda (muhtemelen istihbarat testini geçmedim) diğer cevaplardan herhangi birinin çalışmasını sağlayamıyorum ve bazı deneylerden sonra, bunu kullanıyorum (Bootstrap varsayılanına çok yakın olduğuna inanıyorum):

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

Ve CSS dosyasında aşağıdakileri ekledim:

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

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

@Html.ActionLink()Bir <a>etiket için Razor sözdizimi olduğunu unutmayın . Dediği yerde @Html.ActionLink(...)sadece uygun bir <a>etiketle değiştirin . Aynı şekilde @Url.Action(...), uygun bir URL ile değiştirin ( <a>bu durumda etiket yok ).

Bu semantik değil ama sadece mevcut olanı kullanıyorum a öğeyi kullanıyorum, bir arka plan görüntüsü ayarlıyorum, sonra @ 2x çözünürlük, daha küçük ekran boyutları vb.Için birden fazla varyasyon oluşturuyorum.

Ardından, .text-hidesayfanın moda şeklini almak için sınıfı kullanabilirsiniz . Bir imgenin doğru kullanımı olmasa da basit ve etkilidir.

İşte metin değiştirme yardımcı sınıfına bir bağlantı:

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

Bu soru için en kolay ve en iyi yanıt, logonuza bağlı olarak maksimum genişlik ve yükseklik ayarlamaktır, görüntü maksimum 50 piksel yüksekliğinde ancak 200 pikselden uzun olmayacaktır.

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

Bu, logo boyutunuza ve sahip olduğunuz gezinti çubuğu öğelerine bağlı olarak değişir.

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

Lütfen kodu kendi çabanızla anlayın: D Bu benim taslak kodum ve zaten çalışıyor :) İşte ekran görüntüsü.

Metin markasını değiştirmek yerine, aşağıdaki koddaki gibi iki satıra ayrıldım img-responsiveve resme sınıf verdim ...

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

ve ayrıca, aşağıdaki css kodlarını ekledim .......

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

Kodum sorununuzu çözerse, benim için zevktir .....

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

// Kodunuzun başına bootstrap eklemeyi unutmayın.