Bootstrap 3 Navbar dengan Logo

376

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.

stepanian
sumber
2
<img src="logo.png" width="27px" />: sesuaikan
Uday Hiwarale
29
Dengan semua jawaban yang diajukan untuk pertanyaan ini, mengapa salah satu dari mereka tidak ditandai sebagai solusi?
Chris22
1
Dua alasan, saya pikir: 1. Jika seseorang mengubah situs, dimensi diperbaiki di HTML daripada di CSS, sehingga menciptakan mimpi buruk pemeliharaan. 2. Bukankah seharusnya tinggi = "27px"? Tinggi, bukan lebar, itulah kendala.
Canuck
Atribut width dan height menganggap nilainya dalam piksel, oleh karena itu Anda tidak boleh menambahkan 'px' dalam nilai gthe. width="27"
jmmeijer
Semua hal dipertimbangkan, ini adalah jawaban terbaik dan harus diterima stackoverflow.com/a/26333342/171456 . Ini melayani kebutuhan komunitas SO yang lebih luas yang telah mengunjungi pertanyaan ini sejak 2013.
Zim

Jawaban:

420

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.

Michael
sumber
43
Saya kira alasan mengapa orang menaruh gambar di dalam tag jangkar adalah karena itu adalah bagaimana Boostrap doc melakukannya: getbootstrap.com/components/#navbar-brand-image
cafonso
9
bagaimana jika Anda ingin menggunakan gambar yang lebih besar?
StevenP
5
@cafonso - Saya tidak mengatakan itu tidak termasuk dalam jangkar - hanya saja jangkar tidak membutuhkan kelas "navbar-brand". Ketika kelas itu hadir - itu benar-benar kacau dengan cara gambar ditampilkan.
Michael
4
@conson membuat poin bagus. Saya percaya TWBS ingin ini digunakan untuk gambar atau teks. Dan mempertimbangkan berapa banyak orang yang mengalami masalah dengan ini harus menjadi indikasi bahwa sudah waktunya mereka memperbaiki ini atau mengklarifikasi dalam dokumen mereka.
Bryan Willis
3
@Michael, contoh dokumentasi Bootstrap resmi menunjukkan jangkar dengan kelas navbar-brand. Ini adalah sumber kebingungan.
Justin Skiles
148
<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>
Vicky
sumber
5
untuk apa margin negatif?
Ayrad
3
Margin negatif membantu memusatkan secara vertikal untuk saya.
Words Like Jared
3
Mengikuti komentar Edward ... atau setidaknya demo yang berfungsi
Matías Cánepa
Anda tidak harus mengotak-atik margin negatif (kecuali gambar yang dipotong lucu). Cara ini bukan solusi yang baik karena sepenuhnya tergantung pada ukuran logo dan harus disesuaikan berdasarkan kasus per kasus. Berikut ini adalah demo metode ini .
Bryan Willis
1
Pilihan yang lebih baik yang secara konsisten akan berfungsi tidak peduli ukuran logo / ransum adalah melakukan apa yang dilakukan .img-responsif kecuali membalikkannya. Karena .navbar-brand telah mengapung: diaplikasikan kiri menjadi elemen blok dan karena memiliki ketinggian 50px kita dapat mengatur max-tinggi gambar hingga 100%; dan itu TIDAK akan pernah meluap atau menyebabkan seluruh navbar tumbuh. Menjadi dibatasi agar sesuai dengan tinggi merek .navbar. Jika terlihat terlalu kecil di navbar 50px default, sesuaikan .navbar-brand> img padding atas dan bawah. Inilah jawaban lengkapnya dengan demo kerja
Bryan Willis
73

Ubah ukuran logo bootstrap 3 navbar

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

Bryan Willis
sumber
Terima kasih Jose. Tidak berfungsi di IE yang saya tidak pernah tahu sampai sekarang. Saya mengedit jawaban dari komentar Anda. Juga, saya tidak benar-benar yakin apakah ketinggian dan maks-tinggi keduanya diperlukan.
Bryan Willis
Tentu! Object-fit telah menjadi salah satu tambahan yang luar biasa dari mesin webkit / blink. Semoga browser lain segera mengintegrasikannya! Sementara itu kita akan menggunakan gambar latar belakang untuk melakukan kerja keras!
Jose A
1
Hei Jose sebenarnya baru saja menemukan sesuatu. Periksa demo baru. Sebenarnya sepertinya jawaban awal saya bekerja di semua browser lain bukan karena objek yang cocok tetapi karena tinggi dan tinggi max. Saya pikir hanya itu yang benar-benar diperlukan ... Bisakah Anda menemukan situasi di mana hal di atas tidak akan berfungsi sekarang?
Bryan Willis
Saya bahkan tidak berpikir objek fit diperlukan karena max tinggi dan tinggi ukurannya ke ketinggian wadah seperti .img-responsif akan lakukan.
Bryan Willis
Menurutmu apakah objek fit bahkan melakukan apa saja? Saya pikir kita mungkin bisa menjatuhkannya dalam kasus ini, tapi saya tidak yakin?
Bryan Willis
23

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:

masukkan deskripsi gambar di sini

antara 768 dan 992 piksel (menu tidak diciutkan):

masukkan deskripsi gambar di sini

<768 (menu diciutkan)

masukkan deskripsi gambar di sini

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

Bass Jobsen
sumber
1
Saya mencoba opsi ini. Dua masalah dengan itu adalah: 1) Pada layar yang lebih kecil seperti telepon, menu yang diciutkan muncul di atas logo (bahkan jika saya menambahkan kelas img-responsif ke logo img tag) dan 2) Tidak ada cara untuk menyelaraskan menu item untuk apa pun kecuali atas. Penyesuaian lainnya akan menyebabkan menu yang diciutkan tidak berfungsi dengan benar.
stepanian
23

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

Matahari
sumber
1
Solusi paling masuk akal di sini. acungan jempol
user3718908
1
Ini harus menjadi jawaban yang diterima. Ini mengatasi masalah mengubah ukuran Navbar agar sesuai dengan gambar.
Greg Gum
14

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.

Derek Williams
sumber
Ini adalah jawaban yang sebenarnya
StevenP
1
Menghapus kelas navbar-brandmelakukannya untuk saya.
Kai Hartmann
14

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

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

DEMO: jsfiddle

Kuofp
sumber
13

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%;
}
dustinfarris
sumber
2
Saya percaya bahwa ini berarti Anda mengatur lebar gambar di <a>tag Anda, bukan <img>tag, sejak img-responsiveditetapkan max-width="100%". Bisakah Anda jelaskan bagaimana ini membantu?
Michael Scheper
Michael menyampaikan poin yang bagus. .image-responsivedimaksudkan untuk mengubah ukuran gambar berdasarkan WIDTH wadah eksplisit gambar dan bukan HEIGHT yang mengubah ukuran berdasarkan lebar. Jadi terlepas dari berapa banyak upvotes ini sudah mendapatkannya TIDAK AKAN bekerja lihat di sini . Namun, kita dapat menggunakan metode yang sama dengan respons gambar dan menerapkannya pada ketinggian. Jadi hapus .img-responsif dari persamaan dan cukup atur max-height ke navbar-brand . Lihat jawaban saya di sini .
Bryan Willis
5

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.

NurlanXp
sumber
4

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>
cwohlman
sumber
4

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;
}
Brian Scramlin
sumber
3

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.

vascorola
sumber
Anda dapat menggunakan satu <a> dan hanya memiliki 4 <img> yang berbeda, satu untuk setiap ukuran.
Jonathan Vanasco
@ Jonathan Vanasco, saya akan tertarik untuk melihat bagaimana Anda akan melakukannya
AdRock
1
hapus visible-SIZEdari atag, dan letakkan di tag img. <a class="navbar-brand"><img class="visible-xs"/><img class="visible-sm"/></a>
Jonathan Vanasco
3

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>
Krista A.
sumber
2

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

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

Bryan Willis
sumber
2

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>
batas
sumber
1

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

twiddly
sumber
1

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;
}
XåpplI'-I0llwlg'I -
sumber
1

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

Taras Vovkovych
sumber
1

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
}
Jose Mhlanga
sumber
0

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>
OpenCode
sumber
0

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;
}
}
pengguna3137032
sumber
0

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

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

Manfred
sumber
0

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

Ken Prince
sumber
0

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.

Theo Leinad
sumber
0
<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.

masukkan deskripsi gambar di sini

LYKS
sumber
0

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

IZ
sumber
0
 <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.

Ch UmarJamil
sumber