Html 导航栏中的 Bootstrap 3 个人资料图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23991943/
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
Bootstrap 3 profile image in navbar
提问by Martijn Thomas
How do I get the profile image (see picture) to be say 25/30px without distorting the navbar?
如何在不扭曲导航栏的情况下将个人资料图像（见图）设为 25/30 像素？
This is what I have now:
这就是我现在所拥有的：
<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>
this is the result:
这是结果：
But if I change the size of the image to 30x30 this is what happens, how do I prevent the distortion of the navbar:
但是，如果我将图像的大小更改为 30x30，就会发生这种情况，如何防止导航栏失真：
I tried clearing the margin and paddings on the image but that had no effect.
我尝试清除图像上的边距和填充，但没有效果。
Update:Here is a JSFiddleof the current code.
更新：这是当前代码的JSFiddle。
采纳答案by jme11
You got it mostly right following what Kooki3 said, there's just more specificity in the Bootstrap stylesheet, so just change your .profile-imageto .navbar-nav>li>a.profile-image
按照 Kooki3 的说法，您基本上是正确的，Bootstrap 样式表中有更多的特殊性，所以只需将您的更改.profile-image为.navbar-nav>li>a.profile-image
Editing your fiddle like this, the nav looks perfect to me:
像这样编辑你的小提琴，导航对我来说看起来很完美：
.navbar-nav>li>a.profile-image {
padding-top: 10px;
padding-bottom: 10px;
}
回答by Kooki3
after looking at the JSFiddle, I found out the problem is caused by the height of the image you use instead of the padding.
查看 JSFiddle 后，我发现问题是由您使用的图像的高度而不是填充引起的。
give the image a class, and make it float left, then use position:relative to tweak the position.
给图像一个类，让它向左浮动，然后使用 position:relative 调整位置。
<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;
}
My Fiddle here
我的小提琴在这里
回答by Kisspa
//write you script
$(document).ready(function(){
$(".dropdown").mouseover(function(){
$(".dropdown-menu").show();
})
$(".dropdown").mouseout(function(){
$(".dropdown-menu").hide();
});
});
