web-dev-qa-db-fra.com

Image du logo Twitter-Bootstrap-2 en haut de la barre de navigation

Quelqu'un peut-il suggérer comment je peux placer une image de logo sur le dessus de la barre de navigation? Mon balisage:

  <body>
    <a href="index.html"> <img src="images/57x57x300.jpg"></a>
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">

Il ne fonctionne pas car le fichier 57x57x300.jpg est affiché sous la barre de navigation.

twitter-bootstrapnavbartwitter-bootstrap-2
67
Gattoo

Vous devez également ajouter la classe "navbar-brand" à votre conteneur image a, vous devez également l’inclure à l’intérieur du .navbar-inner conteneur, comme ceci:

 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
        <a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
     </div>
   </div>
 </div>
71
Andres Ilich

Remplacez la classe de la marque, dans le fichier bootstrap.css ou dans un nouveau fichier CSS, comme indiqué ci-dessous -

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

et votre html devrait ressembler à -

<div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>
55
Simon Cunningham

Vous devriez enlever navbar-fixed-top class sinon la barre de navigation reste fixée en haut de la page où vous voulez un logo.

Si vous souhaitez insérer un logo dans la barre de navigation:

Hauteur de la barre de navigation (définie dans @navbarHeight MOINS variable) est 40px par défaut. Votre logo doit tenir à l'intérieur ou vous devez d'abord augmenter la barre de navigation.

Ensuite, utilisez brand class:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
    </div>
  </div>
</div>

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

Si vous faites cela dans MOINS:

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

@elementHeight devrait être réglé à la hauteur de votre image.

Le calcul du rembourrage provient de Twitter Bootstrap MOINS - https://github.com/Twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

Sinon, vous pouvez calculer vous-même les valeurs de remplissage et utiliser du CSS pur.

Cela fonctionne pour Twitter Bootstrap versions 2.0.x, devrait également fonctionner en 2.1, mais le calcul du bourrage a été légèrement modifié: https://github.com/Twitter/bootstrap/ blob/v2.1.0/less/navbar.less # L5

13
jana4u

j'utilise ce code pour la barre de navigation sur bootstrap 3.2.0, l'image doit avoir une hauteur maximale de 50 pixels, sinon elle saignera la barre de navigation standard de bs.

Notez que je n'utilise pas à dessein la classe = 'navbar-brand' car cela introduit un remplissage sur l'image

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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="" href="/"><img src='img/anyWidthx50.png'/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Active Link</a></li>
        <li><a href="#">More Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</div>
4
Greg

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/

3
Fox