twitter引導和配置文件/頭像中的頭像

我正在使用Twitter Bootstrap，我正試圖讓用戶的個人資料圖片旁邊的導航欄中遇到他們的用戶名。twitter引導和配置文件/頭像中的頭像

這是我的代碼。但是，會發生什麼情況是圖片在屏幕頂部結束。我不知道是否有與twitter引導CSS的方式讓它居中。任何建議將不勝感激。

<%@ 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>

來源

2012-11-26 Old Man Programmer

繼承人什麼我能爲用戶名的地方在導航欄做

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; 
}

來源

2012-11-26 03:39:25 Yohn

如果使用較少，簡單地做到這一點

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

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

而且比你可以把你的圖像，即使在菜單項與文本鏈接和圖像

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

來源

2014-09-01 08:27:42 Andrej

twitter引導和配置文件/頭像中的頭像

回答

相關問題