导航栏中的 Bootstrap 3 配置文件图像

Posted 2023-03-05

【中文标题】导航栏中的 Bootstrap 3 配置文件图像

【英文标题】：Bootstrap 3 profile image in navbar

【发布时间】：2014-07-22 10:01:57

【问题描述】：

如何在不扭曲导航栏的情况下将个人资料图片（见图片）设为 25/30 像素？

这就是我现在拥有的：

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

这是结果：

但是如果我将图像的大小更改为 30x30，会发生这种情况，我该如何防止导航栏失真：

我尝试清除图像上的边距和填充，但没有效果。

更新：这是当前代码的JSFiddle。

【问题讨论】：

我看到您使用自定义图标。您可以检查您的 css 中的那个图标并确保它适用于所有尺寸？

在这种情况下，它不是一个图标，它是一个图像（当前是一个占位符），但稍后它将是用户的个人资料图像。所以我看不出你的建议有什么帮助（对不起）。

我看错地方了。但是你为什么不想使用 CSS 图标呢？它将确保您在所有屏幕尺寸上都有正确尺寸的图标。

@Megakuh 我正在使用 css 图标（字体真棒），但在这种情况下，在布局中的这个位置我想显示用户个人资料图像/头像，所以我不能使用 CSS 图标据我所知，显示用户的实际个人资料图片。

你能解释一下它是如何扭曲你的导航栏的吗？也许提供一些视觉指南，您希望它看起来如何？那简直太好了。我猜你想在图像和其他元素之间有一些额外的填充？

【参考方案1】：

查看 JSFiddle 后，我发现问题是由您使用的图像高度而不是填充引起的。

给图像一个类，让它向左浮动，然后使用 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;

我的小提琴here

【讨论】：

我将 profile-image 类移动到锚点，并将填充设置为 0，但这没有任何效果 :(

你有什么页面可以用来检查吗？仅通过查看图像无法想象/重现问题。谢谢

我赞成您的回答，但接受了@jme11 的回答。原因很简单，对我来说，这个解决方案似乎更优雅。但是您的解决方案仍然有效:)

【参考方案2】：

按照 Kooki3 的说法，您基本上是正确的，Bootstrap 样式表中只有更多的特殊性，所以只需将您的 .profile-image 更改为 .navbar-nav>li>a.profile-image

像这样编辑你的小提琴，导航对我来说看起来很完美：

.navbar-nav>li>a.profile-image 
    padding-top: 10px;
    padding-bottom: 10px;

【讨论】：

乍一看可行，但现在悬停不再正确：jsfiddle.net/bJcrk/3

抱歉，打错了。应该是 10px 顶部和 10px 底部。更新了我的答案。

【参考方案3】：

//write you  script
$(document).ready(function()
    $(".dropdown").mouseover(function()
        $(".dropdown-menu").show();
    )
    $(".dropdown").mouseout(function()
        $(".dropdown-menu").hide();
    );
);

【讨论】：

Ehm...下拉菜单没有问题，问题在于图像，下拉菜单正常工作。

什么活动？我的朋友