twitter bootstrap et profil/image d'avatar dans navbar

Question

J'utilise Twitter Bootstrap et j'essaie d'obtenir l'image de profil de l'utilisateur à venir à côté de leur nom d'utilisateur dans la barre de navigation.

Voici mon code. Mais ce qui se passe, c'est que l'image finit au ras de l'écran. Je ne savais pas s'il y avait un moyen avec le Twitter bootstrap css de l'obtenir au centre. Toutes les suggestions seraient grandement appréciées.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#">Codename: Success</a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact">Contact</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li class="nav-header">Nav header</li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <c:choose> 
       <c:when test="${not empty pageContext.request.userPrincipal.name}"> 
        <div id="userHeaderProfile" class="navbar-text pull-right"> 
         <p>${pageContext.request.userPrincipal.name}</p> 
        </div> 
        <div class="pull-right"><img src="http://placehold.it/30x30" alt="30x30" /></div> 
       </c:when> 
       <c:otherwise> 
        <form method="post" class="navbar-form pull-right" action="<c:url value='/j_spring_security_check'/>"> 
         <input id="username" name="j_username" class="span2" type="text" placeholder="Email"> 
         <input id="password" name="j_password" class="span2" type="password" placeholder="Password"> 
         <button type="submit" class="btn">Sign in</button> 
        </form> 
       </c:otherwise> 
      </c:choose> 
      <!--/.nav-collapse --> 
     </div> 
    </div> 
</div> 

Answer 1

Heres ce que j'ai pu faire pour le lieu de nom d'utilisateur dans la barre de navigation

HTML

<div class="pull-right navbar-text"> 
    <img src="http://placehold.it/30x30"> 
    Chuck Norris 
</div> 

CSS

 
.navbar-text img { 
    max-height:30px; 
    width:auto; 
    vertical-align:middle; 
} 

Answer 2

Si vous utilisez moins, il suffit de faire cette

@navbar-img: @navbar-height - 2* @navbar-padding-vertical; 

.navbar img { max-height: @navbar-img; } 

Et que vous pouvez mettre votre image même dans l'élément de menu comme un lien avec un texte et l'image

li 
    a.navbar-text(href='action') 
    | 
    img(src='<avatar url>')