Saya ingin menambahkan logo ke navbar atas dalam navbar-brand. Saya ingin logo tersebut menyesuaikan dengan ukuran viewport, jadi saya menggunakan kelas img-responsive2.
Tampaknya gambar dan teks di navbar-brand membungkus ke baris berikutnya.
Halaman ini dapat dilihat di http://digitalponddesign.com/dev/
Terima kasih sebelumnya atas bantuan Anda.
Berikut adalah kode saya:
Html
<h2 class="navbar-brand brand-name">
<a href="index.html"><img class="img-responsive2"
src="images/DigitalPondlogo.png">DigitalPond</a>
</h2>
CSS
.navbar {
margin: 10px 0;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}
.nav-container {
padding-top: 8px;
}
.navbar-custom {
font-size: 20px;
background-color: #FFF;
}
Saya menemukan solusi di thread lain yang berhasil - gunakan kelas pull-left:
<a href="#" class="pull-left"><img src="/path/to/image.png"></a>
Terima kasih kepada Michael di thread ini:
https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class
Anda bisa menampilkan teks dan gambar sebagai blok sebaris sehingga mereka tidak bertumpuk. menggunakan float seperti pull-left/pull-right dapat menyebabkan masalah yang tidak diinginkan sehingga mereka harus digunakan dengan hemat
<a class="navbar-brand" href="#">
<img src="mylogo.png" style="display: inline-block;">
<span style="display: inline-block;">My Company</span>
</a>
Saya akan menyarankan Anda untuk menggunakan gambar atau teks. Jadi, Hapus teks dan tambahkan dalam gambar Anda (menggunakan Photoshop, mungkin). Kemudian, Gunakan lebar dan tinggi 100% untuk gambar. itu akan berhasil. karena gambar dapat diubah ukurannya berdasarkan wadah. Tapi, Anda harus mengubah ukuran teks secara manual. Jika Anda dapat memberikan biola, saya dapat membantu Anda mencapai ini.