web-dev-qa-db-fra.com

Bootstrap 3 image de profil dans la barre de navigation

Comment puis-je obtenir l'image de profil (voir photo) soit 25/30px sans déformer la barre de navigation?

Voici ce que j'ai maintenant:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <img src="http://placehold.it/18x18" class="profile-image img-circle"> Username <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
    </ul>
</li>

voici le résultat:

small image but no distortion

Mais si je change la taille de l'image en 30x30, c'est ce qui se passe, comment éviter la distorsion de la barre de navigation:

large image but a distorted navbar

J'ai essayé d'effacer la marge et les rembourrages de l'image mais cela n'a eu aucun effet.

Mise à jour: Voici un JSFiddle du code actuel.

htmlcssimagetwitter-bootstrap
18
Martijn Thomas

Vous avez presque tout à fait raison après ce que Kooki3 a dit, il y a juste plus de spécificité dans la feuille de style Bootstrap, alors changez simplement votre .profile-image à .navbar-nav>li>a.profile-image

En éditant votre violon comme ça, la navigation me semble parfaite:

.navbar-nav>li>a.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}
11
jme11

après avoir regardé le JSFiddle, j'ai découvert que le problème était dû à la hauteur de l'image que vous utilisez au lieu du rembourrage.

donnez à l'image une classe et faites-la flotter à gauche, puis utilisez position: relative à Tweak la position.

<li class="dropdown">
    <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
        <img src="http://placehold.it/30x30" class="img-circle special-img"> Test <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
                </ul>
</li>

-

.special-img 
{
    position: relative;
    top: -5px;
    float: left;
    left: -5px;
}

Mon Fiddle ici

16
Kooki3