Bootstrap 3 Navbar dengan Logo

Saya ingin menggunakan navbar default Bootstrap 3 dengan logo gambar alih-alih branding teks. Apa cara yang tepat untuk melakukan ini tanpa menyebabkan masalah dengan ukuran layar yang berbeda? Saya menganggap ini persyaratan umum, tetapi saya belum melihat contoh kode yang baik. Persyaratan utama selain memiliki tampilan yang dapat diterima pada semua ukuran layar adalah kemampuan menu pada layar yang lebih kecil.

Saya mencoba hanya meletakkan tag IMG di dalam tag A yang memiliki kelas merek navbar, tetapi itu menyebabkan menu tidak berfungsi dengan baik di ponsel android saya. Saya juga mencoba meningkatkan ketinggian kelas navbar, tetapi hal itu malah mengacaukan segalanya.

Omong-omong, gambar logo saya lebih besar dari ketinggian navbar.

Mengapa semua orang berusaha melakukannya dengan cara yang sulit? Tentu, beberapa pendekatan ini akan berhasil, tetapi lebih rumit daripada yang diperlukan.

OK, pertama - Anda perlu gambar yang sesuai dengan navbar Anda. Anda dapat menyesuaikan gambar Anda melalui atribut tinggi css (memungkinkan lebar untuk menskala) atau Anda bisa menggunakan gambar berukuran tepat. Apa pun yang Anda putuskan untuk dilakukan - penampilannya akan tergantung pada seberapa baik Anda mengukur gambar Anda.

Untuk beberapa alasan, semua orang ingin menempelkan gambar di dalam jangkar navbar-brand, dan ini tidak perlu. navbar-brandmenerapkan gaya teks yang tidak perlu untuk gambar, serta navbar-leftkelas (seperti pull-left, tetapi untuk digunakan di navbar). Yang Anda butuhkan hanyalah menambahkan navbar-left.

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

Anda bahkan dapat mengikuti ini dengan item merek navbar, yang akan muncul di sebelah kanan gambar.

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

SELESAI DEMO DENGAN CONTOH BANYAK

PEMBARUAN PENTING: 12/21/15

Saat ini ada bug di Mozilla yang saya temukan yang memecah navbar pada lebar browser tertentu dengan BANYAK DEMOS PADA HALAMAN INI . Pada dasarnya bug mozilla termasuk padding kiri dan kanan pada tautan merek navbar sebagai bagian dari lebar gambar. Namun, ini dapat diperbaiki dengan mudah dan saya sudah menguji ini dan saya cukup yakin itu adalah contoh kerja paling stabil di halaman ini. Ini akan mengubah ukuran secara otomatis dan berfungsi pada semua browser.

Cukup tambahkan ini ke css Anda dan gunakan navbar-brand seperti yang Anda inginkan .img-responsive. Logo Anda akan secara otomatis sesuai

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

Pilihan lain adalah menggunakan gambar latar belakang. Gunakan gambar dari berbagai ukuran dan kemudian atur lebar yang diinginkan:

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

JAWABAN ASLI DI BAWAH (hanya untuk referensi)

Orang-orang tampaknya banyak melupakan objek-fit. Secara pribadi saya pikir ini yang paling mudah untuk dikerjakan karena gambar secara otomatis menyesuaikan dengan ukuran menu. Jika Anda hanya menggunakan objek yang cocok pada gambar itu akan secara otomatis mengubah ukuran ke ketinggian menu.

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

Itu menunjukkan bahwa ini tidak berfungsi di IE "belum". Ada polyfill , tetapi itu mungkin berlebihan jika Anda tidak berencana menggunakannya untuk hal lain. Memang terlihat seperti objek-fit sedang direncanakan untuk rilis IE di masa depan sehingga setelah itu terjadi ini akan bekerja di semua browser.

Namun, jika Anda melihat kelas .img-responsif di bootstrap, max-width mengasumsikan Anda meletakkan gambar-gambar ini dalam kolom atau sesuatu yang memiliki set eksplisit dengan. Ini berarti bahwa 100% secara khusus berarti lebar elemen induk 100%.

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

Alasan kami tidak dapat menggunakannya dengan navbar adalah karena induk (.navbar-brand) memiliki ketinggian tetap 50px, tetapi lebarnya tidak ditentukan.

Jika kita mengambil logika itu dan membalikkannya menjadi responsif berdasarkan ketinggian, kita dapat memiliki gambar responsif yang menskala ke ketinggian .navbar-brand dan dengan menambahkan dan mengatur lebar otomatis, itu akan menyesuaikan proporsi.

max-height: 100%;
width: auto;

Biasanya kita harus menambahkan display:block;skenario, tetapi karena navbar-brand sudah memiliki float: left; diterapkan padanya, ia secara otomatis bertindak sebagai elemen blok.

Anda mungkin mengalami situasi langka di mana logo Anda terlalu kecil. Pendekatan img-responsif tidak memperhitungkan ini, tetapi kami akan melakukannya. Dengan menambahkan atribut "tinggi" ke .navbar-brand > imgAnda dapat yakin bahwa itu akan naik turun.

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

Jadi untuk menyelesaikan ini saya menggabungkan keduanya dan tampaknya berfungsi dengan baik di semua browser.

<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

Meskipun pertanyaan Anda menarik, saya tidak berharap akan ada satu jawaban untuk itu. Mungkin pertanyaan Anda terlalu luas. Solusi Anda harus bergantung pada: konten lain di navbar (jumlah item), ukuran logo Anda, jika logo Anda bertindak responsif, dll. Menambahkan logo di a (dengan merek navbar) tampaknya merupakan titik awal yang baik. Saya harus menggunakan navbar-brand class karena ini akan menambah padding (atas / bawah) dari 15 piksel.

Saya menguji pengaturan ini di http://getbootstrap.com/examples/navbar/ dengan logo 300x150 piksel.

Layar penuh> 1200:

antara 768 dan 992 piksel (menu tidak diciutkan):

<768 (menu diciutkan)

Selain aspek estetika saya tidak menemukan masalah teknis. Pada layar kecil, logo besar mungkin tumpang tindih atau merusak viewport. Layar antara 768 dan 992 piksel juga memiliki masalah lain ketika konten tidak sesuai dalam satu baris, lihat misalnya: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

Navbar default memiliki . Contoh navbar default menambahkan margin bawah 30px sehingga konten navbar Anda tidak boleh tumpang tindih dengan konten halaman Anda. (navbar tetap akan mengalami masalah ketika ketinggian navbar bervariasi).

Anda akan memerlukan beberapa css dan permintaan media untuk menyesuaikan navbar dengan kebutuhan Anda pada ukuran layar yang berbeda. Coba persempit pertanyaan Anda. uraikan masalah yang Anda temukan di android.

perbarui lihat http://bootply.com/77512 untuk contoh.

Pada layar yang lebih kecil seperti telepon, menu yang diciutkan muncul di atas logo

pertukarkan tombol dan logo dalam kode Anda, logo terlebih dahulu (atur float: kiri pada logo)

Tidak ada cara untuk menyelaraskan item menu ke apa pun kecuali atas

atur margin-topuntuk .navbar-collapse ul. Gunakan tinggi logo dikurangi tinggi navbar, untuk menyelaraskan ke bawah atau (tinggi logo - tinggi navbar) / 2 ke tengah

Instruksi cara membuat navbar bootstrap dengan logo yang lebih besar dari tinggi default (50px):

Contoh dengan logo 100px x 100px, CSS standar:

1. Hitung ketinggian dan (padding top + padding bottom) dari logo. Di sini 120px (tinggi 100px + bantalan atas (10px) + bantalan bawah (10px))

2. Goto bootstrap / sesuaikan . Atur bukannya tinggi navbar 50px> 120px (50 + 70) dan navbar-collapse-max-height dari 340px ke 410px (340 + 70). Unduh css.

3. Dalam contoh ini saya menggunakan navbar ini . Dalam navbar-merek :

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

   tambahkan kelas, misalnya myLogo , dan img (logo Anda)

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

4. Tambahkan CSS

   .myLogo {padding: 10px; }

5. Cukup untuk ukuran lainnya.

Contoh

Yah akhirnya saya punya masalah yang sama, ini solusi saya dan saya mengujinya di situs saya di ketiga browser utama: Chrome, Firefox, dan Internet Explorer.

Pertama-tama jika Anda tidak menggunakan logo berbasis teks maka hapus "navbar-brand" sepenuhnya karena saya menemukan kelas khusus ini menjadi penyebab utama menu nav saya yang runtuh menjadi dua kali lipat.

Berteriaklah ke user3137032 untuk memimpin saya ke arah yang benar.

Anda harus membuat wadah gambar responsif khusus, yang saya sebut tambang "logo"

Ini adalah tanda HTML bootstrap:

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

Dan kode 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%;
}
}

Nilai dalam @ media (max-width: x) dapat bervariasi tergantung pada lebar gambar logo Anda, milik saya adalah 368px. Persentase mungkin perlu diubah juga tergantung pada ukuran logo Anda. Permintaan @media pertama harus menjadi ambang Anda dan milik saya adalah lebar gambar (368px) + ukuran tombol diciutkan (44px) + sekitar 60px dan keluar ke 480px yang merupakan tempat saya memulai penskalaan gambar responsif.

Harap pastikan untuk menghapus sintaks pisau cukur saya dari bagian HTML. Beri tahu saya jika itu memperbaiki masalah Anda, itu memperbaiki masalah saya.

Sunting: Maaf, saya melewatkan masalah ketinggian navbar Anda. Ada beberapa cara untuk melakukannya, secara pribadi saya mengkompilasi KURANG Bootstrap dengan ketinggian navbar yang sesuai, untuk keperluan saya, saya menggunakan 70px, dan tinggi gambar saya adalah 68 px. Cara kedua untuk melakukannya adalah di file bootstrap.css sendiri, cari ".navbar" dan ubah min-height: ke ketinggian logo Anda.

Solusi saya adalah menambahkan css "display: inline-block" ke img tag.

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

DEMO: jsfiddle

Saya menggunakan kelas img-responsif dan kemudian menetapkan lebar maksimum pada aelemen. Seperti ini:

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

dan CSS:

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

Anda harus menggunakan kode karena ini:

<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 kelas A harus "logo" bukan merek navbar.

Tergantung pada seberapa tinggi Anda ingin logo Anda.

<a>Ketinggian default di navbar adalah 20px, jadi jika Anda menentukan height: 20pxpada logo Anda, itu akan cocok dengan baik.

Namun itu agak kecil untuk sebuah logo, jadi yang saya pilih adalah ini:

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

Ini membuat gambar 30px tinggi dan meluruskan gambar secara vertikal dengan menambahkan margin negatif ke atas (5px adalah setengah dari perbedaan antara bantalan pada a dan ukuran gambar).

Secara bergantian Anda bisa mengganti bantalan pada <a>elemen, misalnya:

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

Perbaikan Cepat : Buat kelas untuk Anda logodan atur heightke 28px. Ini berfungsi baik dengan navbar di semua perangkat. Perhatikan saya katakan bekerja "BAIK".

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

Pendekatan saya adalah memasukkan EMPAT gambar berbeda dengan ukuran berbeda untuk ponsel, tablet, desktop, desktop besar tetapi hanya menunjukkan SATU menggunakan kelas utilitas responsif bootstrap, sebagai berikut:

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

Catatan: Anda dapat mengganti baris yang dikomentari dengan kode yang disediakan. Ganti kode php jika Anda tidak menggunakan wordpress.

Sunting Note2: Ya, ini menambahkan permintaan ke server Anda saat memuat halaman yang mungkin sedikit melambat tetapi jika Anda menggunakan teknik sprite css latar belakang, kemungkinan logo tidak bisa dicetak saat mencetak halaman dan kode di atas harus mendapatkan SEO yang lebih baik.

Anda tidak perlu menambahkan CSS tambahan, karena Bootstrap3 memang menyediakannya. Kecuali Anda memang ingin menambahkannya. Ini adalah kode saya untuk meletakkan logo di sebelah kiri dan tautan ke kanan. Navigasi ini responsif. Lakukan perubahan sesuai keinginan Anda.

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>

Saya juga menerapkannya melalui properti latar belakang css. Ia bekerja sehat dalam nilai lebar apa pun.

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

Pendekatan lain adalah untuk menerapkan Bootstrap built-in .text-hidekelas bersama dari .navbar-branduntuk menggantikan merek teks / konten dengan gambar latar belakang.

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>

Ini adalah metode yang sangat konsisten dan membuat gambar Anda terpusat. Untuk menyesuaikan ukuran gambar, yang perlu Anda lakukan adalah menyesuaikan .navbar-brandlebar karena ketinggian sudah ditetapkan.

Ini demo langsung

Saya memiliki masalah yang sama. Saya menyelesaikannya seperti ini:

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

Tidak ada kelas merek navbar. Hasilnya tampak seperti gambar logo yang cocok dengan navbar dan berfungsi seperti tautan. Saya juga merekomendasikan untuk menggunakan kelas navbar-kanan untuk item menu sehingga mereka tidak akan pergi di bawah 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>

Mungkin ini terlalu sederhana, tapi saya hanya menyalin garis navbar-brand jadi ada dua, gambar dan kemudian teks.

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

Dan saya membuat gambar yang pas di dalam navbar (kira-kira ½ tingginya).

Jika menggunakan KURANG, ini berfungsi:

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

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

Kode ini berfungsi sempurna jika Anda perlu melihat merek terpusat dan dengan lebar otomatis di bilah alat. Ini berisi fungsi Wordpress untuk mendapatkan file gambar dari jalur yang benar:

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

Tambahkan berikut ini ke .navbar-brandkelas

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

kode kerja saya - bootstrap 3.0.3. ketika navbar-toggle, hidden-xs original logo image.

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

Anda dapat mencoba menggunakan @media query seperti di bawah ini.

Tambahkan kelas logo terlebih dahulu, kemudian gunakan @ media untuk menentukan tinggi dan lebar logo Anda per ukuran perangkat. Dalam contoh di bawah ini, saya menargetkan perangkat yang memiliki lebar maksimal 320px (iPhone) Anda dapat bermain-main dengan ini sampai Anda menemukan yang paling cocok. Cara mudah untuk menguji: Gunakan chrome atau Firefox dengan elemen inspeksi. Kecilkan browser Anda sejauh mungkin. Amati perubahan ukuran logo berdasarkan @media max width yang Anda tentukan. Uji pada iPhone, perangkat android, iPad dll untuk mendapatkan hasil yang diinginkan.

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

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

Silakan coba kode berikut:

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

Gagal membuat jawaban lain berfungsi dalam kasus saya (saya mungkin tidak lulus tes intelijen) dan setelah beberapa percobaan, inilah yang saya gunakan (yang saya percaya sangat dekat dengan default 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>

Dan dalam file CSS saya telah menambahkan yang berikut ini:

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

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Perhatikan bahwa @Html.ActionLink()ini adalah sintaks Razor untuk sebuah <a>tag. Di mana katanya @Html.ActionLink(...)ganti saja dengan <a>tag yang sesuai . Sama di mana dikatakan @Url.Action(...)ganti dengan URL yang sesuai (tidak ada <a>tag dalam kasus itu).

Ini bukan semantik tapi saya hanya menggunakan aelemen yang ada , mengatur gambar latar belakang, kemudian membuat beberapa variasi untuk resolusi @ 2x, ukuran layar lebih kecil, dll.

Kemudian, Anda dapat menggunakan .text-hidekelas untuk mendapatkan beberapa teks pada halaman dengan cara mode. Sederhana dan efektif meskipun penggunaan gambar tidak tepat.

Berikut ini tautan ke kelas helper untuk penggantian teks:

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

Jawaban termudah dan terbaik untuk pertanyaan ini adalah menetapkan lebar dan tinggi maks tergantung pada logo Anda, gambar akan menjadi maksimal 50px tinggi tetapi tidak lebih dari 200px.

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

Ini akan bervariasi tergantung pada ukuran logo Anda dan item bar nav yang Anda miliki.

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

Harap mengerti kode atas upaya Anda sendiri: D Ini adalah kode konsep saya dan sudah berfungsi :) Berikut screenshotnya.

Sebagai gantinya mengganti merek teks, saya dibagi menjadi dua baris seperti pada kode di bawah ini dan memberikan img-responsivekelas untuk gambar ......

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

dan di samping itu, saya menambahkan kode css berikut .......

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

Jika kode saya menyelesaikan masalah Anda, dengan senang hati .....

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

// Jangan lupa menambahkan bootstrap di kepala kode Anda.