twitter-bootstrap 导航栏中的 Twitter 引导程序和个人资料/头像图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13557446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap and profile/avatar image in navbar
提问by Old Man Programmer
I am using Twitter Bootstrap and I am trying to get the user's profile pic to come across next to their username in the navbar.
我正在使用 Twitter Bootstrap，我试图让用户的个人资料图片出现在导航栏中他们的用户名旁边。
Here is my code. But what happens is the picture ends up flush to the top of the screen. I didn't know if there was a way with the twitter bootstrap css to get it to center. Any suggestions would be greatly appreciated.
这是我的代码。但是发生的情况是图片最终与屏幕顶部齐平。我不知道 twitter bootstrap 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>
回答by Yohn
Heres what I was able to do for the username place in the navbar
这是我能够为导航栏中的用户名位置做的事情
HTML
HTML
<div class="pull-right navbar-text">
<img src="http://placehold.it/30x30">
Chuck Norris
</div>
CSS
CSS
.navbar-text img {
max-height:30px;
width:auto;
vertical-align:middle;
}
回答by Andrej
If you are using less, simply do this
如果您使用较少，只需执行此操作
@navbar-img: @navbar-height - 2* @navbar-padding-vertical;
.navbar img { max-height: @navbar-img; }
And than you can put your image even within the menu item as a link with a text and your image
而且您甚至可以将您的图像放在菜单项中作为带有文本和图像的链接
li
a.navbar-text(href='action')
|
img(src='<avatar url>')
