twitter-bootstrap 使用 Twitter 引导程序在标题中显示用户的图片或头像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31628225/
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
Display a user's picture or avatar in the header using twitter bootstrap
提问by lxnt
I am trying to insert the user's avatar next to the username in the bootstrap 3 header. I'm having a very hard time achieving this, and I don't want to hack into the provider's css. Any one has already done this ? Thanks for your help
我正在尝试在引导程序 3 标头中的用户名旁边插入用户的头像。我很难实现这一点，而且我不想侵入提供者的 css。有人已经这样做了吗？谢谢你的帮助
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#" class="navbar-brand">Foo's Bar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Awesome link</a></li>
<li><a href="#">More Awesome link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/Chuck">Something <span id ="toto" class="badge" style="@danger">0</span></a>
</li>
<li>
<li><a href="#"><img src="http://placehold.it/30x30"><span class="header-username">Chuck Norris</span></a></li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</div>
</div>
</div>
Edit : the Bootply's link, because that's what friends do ! http://www.bootply.com/X4FhzJiP3T
编辑：Bootply 的链接，因为那是朋友们所做的！http://www.bootply.com/X4FhzJiP3T
采纳答案by timgavin
The avatar appears next to the username. If it's a styling or placement issue you're experiencing, just add a custom class to the avatar image and style accordingly
头像出现在用户名旁边。如果这是您遇到的样式或位置问题，只需将自定义类添加到头像图像并相应地设置样式
.avatar {
/* put custom avatar css here */
}
I also added the .img-responsiveclass to the avatar...
我还将.img-responsive课程添加到头像中...
<li>
<a href="#">
<img src="http://placehold.it/30x30" class="avatar img-responsive">
<span class="header-username">Chuck Norris</span>
</a>
</li>
