Image du logo Twitter-Bootstrap-2 sur le dessus de la barre de navigation

Vous devez également append la classe “navbar-brand” à votre image, vous devez également l’inclure dans le .navbar-inner , comme ceci:

Écraser la classe de marque, soit dans le fichier bootstrap.css, soit dans un nouveau fichier CSS, comme ci-dessous –

 .brand { background: url(images/logo.png) no-repeat left center; height: 20px; width: 100px; } 

et votre HTML devrait ressembler –

Vous devez supprimer la navbar-fixed-top sinon navbar rest fixe en haut de la page où vous souhaitez que le logo.

Si vous voulez placer le logo dans la barre de navigation:

La hauteur de la @navbarHeight navigation (définie dans la variable @navbarHeight LESS) est de 40px par défaut. Votre logo doit tenir à l’intérieur ou vous devez rendre Navbar plus haut en premier.

Ensuite, utilisez la classe de brand :

Si votre logo est supérieur à 20 20px , vous devez également corriger les feuilles de style.

Si vous faites cela en MOINS:

 .navbar .brand { @elementHeight: 32px; padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2); } 

@elementHeight doit être défini sur la hauteur de votre image.

Le calcul de rembourrage est tiré de Twitter Bootstrap LESS – https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

Vous pouvez également calculer vous-même les valeurs de remplissage et utiliser des feuilles de style CSS.

Cela fonctionne pour les versions Twitter Bootstrap 2.0.x, devrait également fonctionner en 2.1, mais le calcul de remplissage a été modifié un peu: https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

J’utilise ce code pour navbar sur bootstrap 3.2.0, l’image devrait avoir au maximum 50px de haut, sinon elle saignerait la barre de navigation standard de bs.

Notez que je n’utilise délibérément pas la classe = ‘navbar-brand’ car cela introduit un remplissage sur l’image

Si vous n’augmentez pas la hauteur de la barre de navigation.

  .navbar .brand { position: fixed; overflow: visible; padding-left: 0; padding-top: 0; } 

voir http://jsfiddle.net/petrfox/S84wP/