kzen.dev
Daha
Question

Bootstrap - Navbar sınıfına logo nasıl eklenir?

Üst navbar'a navbar-brand içinde bir logo eklemek istiyorum. Görüntü alanı boyutuyla ölçeklenmesini istiyorum, bu yüzden img-responsive2 sınıfını kullanıyorum.

Hem görüntü hem de navbar-brand'deki metin bir sonraki satıra sarılıyor gibi görünüyor.

Bu sayfa http://digitalponddesign.com/dev/ adresinden görüntülenebilir.

Yardımlarınız için şimdiden teşekkürler.

İşte benim kodum:

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;

}
leppie
leppie
Edited question 2015ööp50öö4 Şubat 2015 в 4:50
Digital Pond Design
digitalponddesign.com
Programlama
twitter-bootstrap
This question has 1 Cevap in English, to read them log in to your account.

Başka bir başlıkta işe yarayan bir çözüm buldum - pull-left sınıfını kullanın:

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

Bu başlıktaki Michael'a teşekkürler:

https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class

Community
Community
Edited answer 2017ööp54öö11 Mayıs 2017 в 11:54
13

Hem metni hem de görüntüyü satır içi bloklar olarak görüntüleyebilirsiniz, böylece yığılmazlar. pull-left/pull-right gibi kayan noktaların kullanılması istenmeyen sorunlara neden olabilir, bu nedenle bunlar idareli kullanılmalıdır

<a class="navbar-brand" href="#">
  <img src="mylogo.png" style="display: inline-block;">
  <span style="display: inline-block;">My Company</span>
</a>
4

Size bir resim ya da metin kullanmanızı öneririm. Yani, metni kaldırın ve resminize ekleyin (Photoshop kullanarak, belki). Ardından, resim için %100 genişlik ve yükseklik kullanın. bu işinizi görecektir. çünkü resim kapsayıcıya göre yeniden boyutlandırılabilir. Ancak, metni manuel olarak yeniden boyutlandırmanız gerekir. Eğer keman sağlayabilirseniz, bunu başarmanıza yardımcı olabilirim.

0