Twitter Bootstrap-2 image du logo sur le haut de la barre de navigation

Quelqu'un peut-il suggérer comment puis-je placer une image de logo sur le haut de la barre de navigation?
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 comme le 57x57x300.jpg est indiqué en dessous de la barre de navigation.

InformationsquelleAutor Gattoo | 2012-03-27
  1. 71

    Vous devez également ajouter la "navbar-marque" de la classe à votre image a conteneur, vous devez aussi inclure à l'intérieur de la .navbar-inner conteneur, comme suit:

     <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>
    • oui, je suis en utilisant cette méthode. Je pense que c'est la meilleure approche..
    • J'ai du mal avec mon image causant la barre de navigation pour plus élevé qu'il ne l'aurait été sans l'image. L'image elle-même n'est pas plus élevé que la hauteur d'origine de la barre de navigation... des idées?
    • l'image width:100% de sorte qu'il peut étendre autant qu'il le doit (dans le navbars limites).
    • Ne pourrait-il pas être class="navbar-brand" par: getbootstrap.com/components/#navbar-default
    • Cela ne fonctionnera pas si l'image est plus grande que 20px. Comme jana4u dit recompiler le moins est le chemin à parcourir.
    • Ce poste est à partir de 2012 et se réfère donc à getbootstrap.com/2.3.2/components.html#navbar
    • Oh, juste assez.
    • La réponse est obsolète alors et ne devrait pas être accepté répond plus. La question ne fait pas mention d'une version spécifique. Quelqu'un qui est googler pour trouver une solution dès maintenant ne pouvait pas moins de soins que ce travail il y a quelques années. Nous voulons savoir comment mettre en œuvre qu'avec le dernier cadre. Des Solutions pour les anciennes version de cadre doit être juste pour la référence.

    InformationsquelleAutor Andres Ilich
  2. 55

    Remplacer la marque de la classe, soit dans le bootstrap.css ou un nouveau fichier CSS, comme ci-dessous -

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

    et votre code devrait ressembler -

    <div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>
    • vous avez besoin d' "'" dans l'url
    • Non, vous n'avez pas
    InformationsquelleAutor Simon Cunningham
  3. 13

    Vous devez supprimer navbar-fixed-top classe sinon navbar reste fixe en haut de la page où vous voulez logo.

    Si vous voulez placer le logo à l'intérieur de barre de navigation:

    Hauteur de la barre de navigation (à régler dans @navbarHeight MOINS variable) est 40px par défaut. Votre logo doit s'adapter à l'intérieur ou vous devez faire de la barre de navigation supérieure en premier.

    Ensuite utiliser brand classe:

    <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 plus élevé que 20px, vous devez fixer les feuilles de style ainsi.

    Si vous le faites en MOINS:

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

    @elementHeight doit être réglé à votre hauteur de l'image.

    Rembourrage de calcul est prise à partir de Twitter Bootstrap MOINS https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

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

    Cela fonctionne pour Twitter Bootstrap versions 2.0.x, devraient travailler en 2.1, mais rembourrage de calcul a changé un peu: https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

    InformationsquelleAutor jana4u
  4. 4

    j'utilise ce code pour la barre de navigation sur bootstrap 3.2.0,
    l'image doit être au plus 50px de haut, sinon ça va saigner la norme bs navbar.

    Avis que je fait exprès de ne pas utiliser l'class= "navbar-marque" comme cela introduit un rembourrage 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>
    • Merci, j'aime bien cette solution parce qu'elle supprime tous conteneur et ces <div à l'>. Je tiens à ajouter que l'image peut être de plus de 50px, mais si vous souhaitez utiliser ces images en grand vous devez l'indiquer dans votre css - quelque chose comme: #nav_brand_profile_pic { height: 40px; padding-top: 5px; }
    InformationsquelleAutor Greg
  5. 3

    Si vous n'avez pas augmenter 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/

    InformationsquelleAutor Fox