Navstrap Bootstrap 3 avec logo

Je souhaite utiliser la barre de navigation par défaut Bootstrap 3 avec un logo d'image au lieu de la marque de texte. Quelle est la bonne façon de procéder sans causer de problèmes avec différentes tailles d'écran? Je suppose que c'est une exigence courante, mais je n'ai pas encore vu un bon exemple de code. Une exigence clé autre qu'un affichage acceptable sur toutes les tailles d'écran est la possibilité de réduire le menu sur des écrans plus petits.

J'ai essayé de mettre une balise IMG à l'intérieur de la balise A qui a la classe de marque navbar, mais cela a empêché le menu de fonctionner correctement sur mon téléphone Android. J'ai également essayé d'augmenter la hauteur de la classe navbar, mais cela a encore plus foiré les choses.

Soit dit en passant, mon image de logo est plus grande que la hauteur de la barre de navigation.

Pourquoi tout le monde essaie de le faire à la dure? Bien sûr, certaines de ces approches fonctionneront, mais elles sont plus compliquées que nécessaire.

OK, d'abord - vous avez besoin d'une image qui s'adaptera à votre barre de navigation. Vous pouvez ajuster votre image via l'attribut de hauteur css (permettant à la largeur de l'échelle) ou vous pouvez simplement utiliser une image de taille appropriée. Quoi que vous décidiez de faire, l'apparence dépendra de la taille de votre image.

Pour une raison quelconque, tout le monde veut coller l'image à l'intérieur d'une ancre navbar-brand, et ce n'est pas nécessaire. navbar-brandapplique des styles de texte qui ne sont pas nécessaires à une image, ainsi qu'à la navbar-leftclasse (tout comme pull-left, mais pour une utilisation dans une barre de navigation). Tout ce dont vous avez vraiment besoin est d'ajouter navbar-left.

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

Vous pouvez même suivre cela avec un article de marque navbar, qui apparaîtra à droite de l'image.

<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="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

DÉMO COMPLÈTE AVEC DE NOMBREUX EXEMPLES

MISE À JOUR IMPORTANTE: 21/12/15

Il y a actuellement un bug dans Mozilla que j'ai découvert qui casse la barre de navigation sur certaines largeurs de navigateur avec BEAUCOUP DE DÉMOS SUR CETTE PAGE . Fondamentalement, le bug mozilla inclut le rembourrage gauche et droit sur le lien de la marque navbar dans le cadre de la largeur de l'image. Cependant, cela peut être résolu facilement et j'ai testé cela et je suis presque sûr que c'est l'exemple de travail le plus stable sur cette page. Il se redimensionne automatiquement et fonctionne sur tous les navigateurs.

Ajoutez simplement ceci à votre css et utilisez la marque navbar de la même manière que vous le feriez .img-responsive. Votre logo s'adaptera automatiquement

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Une autre option consiste à utiliser une image d'arrière-plan. Utilisez une image de n'importe quelle taille, puis définissez simplement la largeur souhaitée:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

RÉPONSE ORIGINALE CI-DESSOUS (pour référence seulement)

Les gens semblent beaucoup oublier l'ajustement d'objet. Personnellement, je pense que c'est la plus simple à utiliser car l'image s'adapte automatiquement à la taille du menu. Si vous utilisez simplement l'ajustement d'objet sur l'image, il sera automatiquement redimensionné à la hauteur des menus.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Il a été souligné que cela ne fonctionne pas "encore" dans IE. Il existe un polyfill , mais cela peut être excessif si vous ne prévoyez pas de l'utiliser pour autre chose. Il semble que l'ajustement d'objet soit prévu pour une future version d'IE, donc une fois que cela se produira, cela fonctionnera dans tous les navigateurs.

Cependant, si vous remarquez la classe .img-responsive dans le bootstrap, la largeur maximale suppose que vous placez ces images dans des colonnes ou quelque chose qui a un explicite avec set. Cela signifierait que 100% signifie spécifiquement 100% de largeur de l'élément parent.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

La raison pour laquelle nous ne pouvons pas utiliser cela avec la barre de navigation est que le parent (marque .navbar) a une hauteur fixe de 50 pixels, mais la largeur n'est pas définie.

Si nous prenons cette logique et inversons à être réactif en fonction de la hauteur , nous pouvons avoir une image sensible que les échelles à la hauteur .navbar-marque et en ajoutant et réglage automatique largeur il ajustera à proportion.

max-height: 100%;
width: auto;

Habituellement, nous devrions ajouter display:block;au scénario, mais puisque la marque navbar a déjà flotté: gauche; appliqué, il agit automatiquement comme un élément de bloc.

Vous pouvez rencontrer la situation rare où votre logo est trop petit. L'approche img-responsive ne tient pas compte de cela, mais nous le ferons. En ajoutant également l'attribut "height" au, .navbar-brand > imgvous pouvez être assuré qu'il augmentera aussi bien que bas.

max-height: 100%;
height: 100%;
width: auto;

Donc, pour terminer, je les ai mis ensemble et cela semble fonctionner parfaitement dans tous les navigateurs.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Bien que votre question soit intéressante, je ne m'attends pas à ce qu'il y ait une réponse. Votre question est peut-être trop large. Votre solution doit dépendre de: d'autres contenus dans la barre de navigation (nombre d'articles), les tailles de votre logo, si votre logo réagit, etc. L'ajout du logo dans le a (avec la marque navbar) semble un bon point de départ. Je devrais utiliser la classe navbar-brand car cela ajoutera un rembourrage (haut / bas) de 15 pixels.

Je teste ce paramètre sur http://getbootstrap.com/examples/navbar/ avec un logo de 300x150 pixels.

Plein écran> 1200:

entre 768 et 992 pixels (menu non réduit):

<768 (menu réduit)

Outre les aspects esthétiques, je n'ai trouvé aucun problème technique. Sur les petits écrans, un gros logo peut se chevaucher ou éclater la fenêtre d'affichage peut-être. Les écrans entre 768 et 992 pixels ont également d'autres problèmes lorsque le contenu ne tient pas dans une ligne, voir par exemple: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

La barre de navigation par défaut a L'exemple de barre de navigation par défaut ajoute une marge inférieure de 30 pixels afin que le contenu de votre barre de navigation ne chevauche jamais le contenu de votre page. (les barres de navigation fixes auront des problèmes lorsque la hauteur de la barre de navigation varie).

Vous aurez besoin de quelques requêtes CSS et multimédias pour adapter la barre de navigation à vos besoins sur différentes tailles d'écran. Essayez de restreindre votre question. être décrire le problème que vous avez trouvé sur Android.

mise à jour voir http://bootply.com/77512 pour un exemple.

Sur les écrans plus petits comme un téléphone, le menu réduit apparaît au-dessus du logo

permutez le bouton et le logo dans votre code, logo en premier (position flottante: à gauche sur le logo)

Il n'y a aucun moyen d'aligner les éléments de menu sur autre chose que le haut

réglez le margin-toppour .navbar-collapse ul. Utilisez la hauteur du logo moins la hauteur de la barre de navigation, pour aligner vers le bas ou (hauteur du logo - hauteur de la barre de navigation) / 2 pour centrer

Instruction pour créer une barre de navigation bootstrap avec un logo plus grand que la hauteur par défaut (50 px):

Exemple avec un logo 100px x 100px, CSS standard:

1. Calculez la hauteur et (rembourrage haut + rembourrage bas) du logo. Ici 120px (hauteur 100px + haut rembourrage (10px) + bas rembourrage (10px))

2. Aller bootstrap / personnaliser . Définissez au lieu de la hauteur de la barre de navigation 50px> 120px (50 + 70) et la hauteur de navbar-collapse-max de 340px à 410px (340 + 70). Téléchargez css.

3. Dans cet exemple, j'utilise cette barre de navigation . Dans la marque navbar :

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...

   ajoutez une classe, par exemple myLogo , et un img (votre logo)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

4. Ajouter CSS

   .myLogo {padding: 10px; }

5. Convient aux autres tailles.

Exemple

Eh bien, j'ai finalement réussi à faire fonctionner ce même problème, voici ma solution et je l'ai testée sur mon site dans les trois principaux navigateurs: Chrome, Firefox et Internet Explorer.

Tout d'abord, si vous n'utilisez pas de logo basé sur du texte, supprimez complètement "navbar-brand" car j'ai trouvé que cette classe particulière était la principale cause de la multiplication par deux de mon menu de navigation.

Criez à user3137032 pour m'avoir conduit dans la bonne direction.

Vous devez créer un conteneur d'images réactif personnalisé, j'ai appelé le mien "logo"

Voici le balisage HTML bootstrap:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Et le code CSS:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

La valeur dans @media (max-width: x) peut varier en fonction de la largeur des images de votre logo, la mienne est de 368px. Les pourcentages peuvent également devoir être modifiés en fonction de la taille de votre logo. La première requête @media devrait être votre seuil et la mienne était la largeur de l'image (368px) + la taille du bouton replié (44px) + environ 60px et elle est sortie à 480px, c'est là que je commence la mise à l'échelle réactive de l'image.

Veuillez vous assurer de supprimer ma syntaxe de rasoir des parties HTML. Faites-moi savoir si cela résout votre problème, il a corrigé le mien.

Edit: Désolé, j'ai raté votre problème de hauteur de barre de navigation. Il y a deux façons de procéder, personnellement, je compile le Bootstrap LESS avec la hauteur de barre de navigation appropriée, pour mes fins j'utilise 70px, et la hauteur de mon image est de 68 px. La deuxième façon de le faire est dans le fichier bootstrap.css lui-même, recherchez ".navbar" et changez min-height: à la hauteur de votre logo.

Ma solution est d'ajouter css "display: inline-block" à la balise img.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DÉMO: jsfiddle

J'utilise la classe img-responsive, puis je définis une largeur maximale sur l' aélément. Comme ça:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

et le CSS:

.navbar-brand {
    max-width: 50%;
}

Vous devez utiliser le code comme ceci:

<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

L'étiquette de classe A doit être «logo» et non pas la marque navbar.

Cela dépend de la taille que vous souhaitez que votre logo soit.

La <a>hauteur par défaut dans la barre de navigation est de 20 pixels, donc si vous spécifiez height: 20pxsur votre logo, il s'alignera bien.

Cependant, c'est un peu petit pour un logo, alors j'ai opté pour ceci:

<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="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

Cela rend l'image haute de 30 pixels et aligne verticalement l'image en ajoutant une marge négative en haut (5 pixels est la moitié de la différence entre le rembourrage sur a et la taille de l'image).

Alternativement, vous pouvez modifier le rembourrage de l' <a>élément, par exemple:

<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="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Solution rapide : créez une classe pour votre logoet définissez-la heightsur 28px. Cela fonctionne bien avec la barre de navigation sur tous les appareils. Remarquez que j'ai dit fonctionne "BIEN".

.logo {
  display:block;
  height:28px;
}

Mon approche consiste à inclure QUATRE images différentes de tailles différentes pour les téléphones, les tablettes, les ordinateurs de bureau, les ordinateurs de bureau de grande taille, mais ne montrer qu'UNE en utilisant les classes utilitaires réactives de bootstrap, comme suit:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

Remarque: vous pouvez remplacer la ligne commentée par le code fourni. Remplacez le code php si vous n'utilisez pas wordpress.

Modifier la note 2: Oui, cela ajoute des demandes à votre serveur lors du chargement de la page, ce qui pourrait ralentir un peu, mais si vous utilisez une technique de sprite css en arrière-plan, il est probable que le logo ne s'imprime pas lors de l'impression d'une page et que le code ci-dessus devienne meilleur référencement.

Vous ne devriez pas avoir besoin d'ajouter de CSS supplémentaire, car Bootstrap3 le fournit. A moins que vous ne vouliez l'ajouter. C'est mon code pour mettre le logo à gauche et les liens à droite. Cette navigation est réactive. Apportez des modifications à cela comme bon vous semble.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

Je l'implémente également via la propriété d'arrière-plan css. Il fonctionne sainement dans n'importe quelle valeur de largeur.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

Une autre approche consiste à implémenter la .text-hideclasse intégrée de Bootstrap à côté de .navbar-brandpour remplacer le texte / contenu de la marque par une image d'arrière-plan.

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Il s'agit d'une méthode très cohérente et maintient votre image centrée. Pour ajuster la taille de l'image, il vous suffit de régler la .navbar-brandlargeur, car la hauteur est déjà définie.

Voici une démo en direct

J'ai eu le même problème. Je l'ai résolu comme ceci:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Il n'y a pas de classe de marque navbar. Le résultat ressemble à une image de logo qui correspond à la barre de navigation et fonctionne comme un lien. Je recommande également d'utiliser la classe navbar-right pour les éléments de menu afin qu'ils ne descendent pas sous le logo.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

C'est peut-être trop simple, mais je viens de copier la ligne de la marque navbar donc il y en a deux, l'image puis le texte.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

Et j'ai créé une image qui tient à l'intérieur de la barre de navigation (environ la moitié de la hauteur).

Si vous utilisez MOINS, cela fonctionne:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

Ce code fonctionne parfaitement si vous avez besoin de voir la marque centrée et avec la largeur automatique dans la barre d'outils. Il contient la fonction Wordpress pour obtenir le fichier image du bon chemin:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

Ajoutez ce qui suit à la .navbar-brandclasse

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

mon code de travail - bootstrap 3.0.3. lorsque navbar-toggle, image du logo d'origine hidden-xs.

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

Vous pouvez essayer d'utiliser la requête @media comme ci-dessous.

Ajoutez d'abord une classe de logo, puis utilisez @media pour spécifier la hauteur et la largeur de votre logo par taille d'appareil. Dans l'exemple ci-dessous, je cible des appareils d'une largeur maximale de 320 pixels (iPhone). Vous pouvez jouer avec jusqu'à ce que vous trouviez le meilleur ajustement. Un moyen facile de tester: utilisez Chrome ou Firefox avec l'élément d'inspection. Rétrécissez votre navigateur autant que possible. Observez le changement de taille du logo en fonction de la largeur maximale @media que vous spécifiez. Testez sur iPhone, appareils Android, iPad, etc. pour obtenir les résultats souhaités.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

Veuillez essayer le code suivant:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

A défaut de faire fonctionner l'une des autres réponses dans mon cas (je n'ai probablement pas réussi le test d'intelligence) et après quelques expérimentations, c'est ce que j'utilise (qui je crois est très proche de la valeur par défaut de Bootstrap):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

Et dans le fichier CSS, j'ai ajouté ce qui suit:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Notez que @Html.ActionLink()c'est la syntaxe Razor pour une <a>balise. Là où il est dit, @Html.ActionLink(...)remplacez-le simplement par une <a>balise appropriée . De même, là où il est dit, @Url.Action(...)remplacez-le par une URL appropriée (pas de <a>balise dans ce cas).

Ce n'est pas sémantique, mais j'utilise simplement l' aélément existant , définit une image d'arrière-plan, puis crée plusieurs variations pour une résolution @ 2x, des tailles d'écran plus petites, etc.

Ensuite, vous pouvez utiliser la .text-hideclasse pour obtenir du texte sur la page à la mode. Utilisation simple et efficace mais non appropriée d'une image.

Voici un lien vers la classe d'assistance pour le remplacement de texte:

http://getbootstrap.com/css/#helper-classes

La réponse la plus simple et la meilleure pour cette question est de définir une largeur et une hauteur maximales en fonction de votre logo, l'image sera au maximum de 50 pixels de haut mais pas plus de 200 pixels.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Cela variera en fonction de la taille de votre logo et des éléments de la barre de navigation dont vous disposez.

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

Veuillez comprendre le code à vos propres efforts: D Voici mon projet de code et il fonctionne déjà :) Voici la capture d'écran.

Au lieu de remplacer la marque de texte, je me suis divisé en deux lignes comme dans le code ci-dessous et j'ai donné une img-responsiveclasse à l'image ......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

et en plus, j'ai ajouté les codes css suivants .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Si mon code résout votre problème, c'est mon plaisir .....

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// N'oubliez pas d'ajouter bootstrap en tête de votre code.