354 votes

Bootstrap 3 Navbar avec Logo

Je veux utiliser le Bootstrap 3 par défaut de la barre de navigation avec une image de logo à la place du texte l'image de marque. Quelle est la bonne façon de le faire sans causer des problèmes avec différentes tailles d'écran? Je suppose qu'il est une exigence commune, mais je n'ai pas encore vu d'un bon exemple de code. L'une des principales exigences plus acceptable s'afficher sur toutes les tailles d'écran, le menu collapsibility sur les petits écrans.

J'ai essayé juste de mettre une balise IMG à l'intérieur de la balise a la barre de navigation de marque de classe, mais qui a provoqué le menu de ne pas fonctionner correctement sur mon téléphone android. J'ai aussi essayé d'augmenter la hauteur de la barre de navigation de la classe, mais qui a massacré les choses encore plus.

Par le chemin, mon logo image est plus grande que la hauteur de la barre de navigation.

389voto

Michael Points 1009

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

OK, d'abord - vous besoin d'une image qui corresponde à votre barre de navigation. Vous pouvez ajuster votre image via css attribut hauteur (permettant la largeur de l'échelle) ou vous pouvez simplement utiliser une taille appropriée de l'image. Quoi que vous décidiez de faire, la façon dont cela ressemble dépendra de la façon dont vous la taille de votre image.

Pour une raison quelconque, tout le monde veut coller l'image à l'intérieur d'une ancre avec navbar-marque, et ce n'est pas nécessaire. "navbar-marque" s'applique styles de texte qui ne sont pas nécessaires pour une image, ainsi que le pull-gauche style. Tous vous avez vraiment besoin d'ajouter de pull-gauche.

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

Vous pouvez même suivre cela avec une barre de navigation-la marque, qui apparaîtra à la droite de l'image.

144voto

Vicky Points 2492
<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>

23voto

Bass Jobsen Points 18262

Bien que votre question est intéressante, je n'en attends pas, il y aura une réponse pour elle. Peut-être que votre question est trop vaste. Votre solution doit dépendre: autre contenu dans la barre de navigation (nombre d'éléments), de la taille de votre logo, de votre logo acte réactif, etc. L'ajout du logo à la une (avec la barre de navigation de marque) me semble un bon point de départ. Je dois utiliser la barre de navigation de marque de classe, car cela va ajouter un rembourrage (haut / bas) de 15 pixels.

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

Plein écran > 1200:

enter image description here

entre 768 et 992 pixels (menu ne s'est effondré):

enter image description here

<768 (menu s'est effondrée)

enter image description here

À côté de l'aspect esthétique, je n'ai pas trouvé de problème technique. Sur les petits écrans un gros logo de chevauchement ou de sortir de la fenêtre d'affichage peut-être. Les écrans entre 768 et 992 pixels aussi avoir d'autres problèmes lorsque le contenu ne rentre pas en ligne, voir par exemple: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

Par défaut la barre de navigation a Le défaut navbar exemple ajoute un bas-marge de 30px de sorte que le contenu de votre barre de navigation ne doit jamais se chevaucher le contenu de votre page. (fixe navbars va avoir des problèmes lorsque la hauteur de la barre de navigation varie).

Vous aurez besoin d'un peu de css et les media queries pour adapter la barre de navigation de votre besoin sur différentes tailles d'écran. S'il vous plaît essayez de préciser votre question. b.e. décrivez le problème que vous avez trouvé sur android.

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

Sur les petits écrans de téléphone, l'effondrement du menu apparaît au-dessus du logo

échange sur le bouton et le logo dans votre code, le logo de la première (set float:left sur le logo)

Il n'y a pas moyen d'aligner les éléments de menu à tout, sauf à haut

définir l' margin-top pour .navbar-collapse ul. L'utilisation du logo de la hauteur moins la barre de navigation de la hauteur, afin de les aligner vers le bas ou (logo à hauteur barre de navigation de hauteur) / 2 pour centre

14voto

Derek Williams Points 41

Eh bien j'ai enfin eu ce même problème de travail, voici ma solution et je l'ai testé sur mon site à tous les trois principaux navigateurs: Chrome, Firefox et Internet Explorer.

Tout d'abord si vous n'êtes pas à l'aide d'un texte logo de la retirer "navbar-marque" complètement, car j'ai trouvé cette classe particulière d'être la principale cause de mon effondré nav menu de doubler.

Shout out à user3137032 pour me mener dans la bonne direction.

Vous devez faire un custom image réactive conteneur, j'ai appelé le mien "logo"

Voici le bootstrap HTML marque:

<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", "Strains")">
                        <i class="glyphicon glyphicon-leaf"></i> Strains
                    </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 de @media (max-width: x) peut varier en fonction de votre logo, des images de la largeur, la mienne est 368px. Les pourcentages peuvent avoir besoin d'être changé selon vos logo taille. La première de @media requête doit être votre seuil et que la mienne était la largeur de l'image (368px) + effondré taille du bouton (44px) + à propos de 60px et il est venu à 480px qui est l'endroit où je commence le responsive échelle de l'image.

Assurez-vous de retirer mon rasoir de la syntaxe HTML des parties. Laissez-moi savoir si cela résout votre problème, il fixe la mienne.

Edit: Désolé, j'ai raté votre barre de navigation hauteur de l'enjeu. Il y a deux façons d'aller à ce sujet, personnellement je compile le fichier de Bootstrap MOINS avec la barre de navigation de hauteur, pour ma part j'utilise 70px, et ma hauteur de l'image est de 68 px. La deuxième façon de le faire est dans le bootstrap.fichier css lui-même, recherchez ".barre de navigation" et le changement min-height: la hauteur de votre logo.

13voto

dustinfarris Points 131
<p>J’utilise la classe favorisant l’img et puis définir une largeur max sur le <code></code> élément. Comme ça :<pre><code></code></pre><p>et le CSS :</p><pre><code></code></pre></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: