我想使用Bootstrap 3默认导航栏的图像标志,而不是文本品牌。什么是正确的方法来做到这一点,而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求,但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外,一个关键要求是小屏幕上的菜单可折叠性。

我试着在有navbar-brand类的A标签内放置一个IMG标签,但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度,但这把事情搞砸了。

顺便说一下,我的logo图像比导航栏的高度要大。


当前回答

如果使用LESS,这是有效的:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

其他回答

这取决于你想让你的标志有多高。

导航栏中默认的<a>高度是20px,所以如果你在logo上指定height: 20px,它会很好地对齐。

然而,这对于一个标志来说有点小,所以我选择了这个:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

这使得图像高30px,并通过在顶部添加负边距来垂直对齐图像(5px是a上的填充物与图像大小之差的一半)。

你也可以改变<a>元素的填充,例如:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

快速修复:为你的logo创建一个类,并设置高度为28px。这适用于所有设备上的导航栏。注意,我说的是“WELL”。

.logo {
  display:block;
  height:28px;
}

为什么每个人都想用艰难的方式来做?当然,其中一些方法是有效的,但它们比必要的要复杂得多。

好的,首先,你需要一个图像,将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放),或者你可以只使用一个适当大小的图像。无论你决定做什么,这看起来将取决于你的图像大小。

出于某种原因,每个人都想用navbar-brand将图像粘在锚中,这是不必要的。navbar-brand应用的文本样式,不是必要的图像,以及navbar-left类(就像拉左,但用于导航栏)。所有你真正需要的是添加导航栏左。

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

你甚至可以用一个导航栏品牌项目,它将出现在图像的右侧。

如果使用LESS,这是有效的:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

我还通过css后台属性实现它。它在任何宽度值下都能正常工作。

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}