在 Twitter Bootstrap 导航栏中放置标志而不改变导航栏大小

Question

在 Twitter Bootstrap 导航栏中放置标志而不改变导航栏大小

16

有没有办法像这样在Bootstrap的导航栏上放置一个图片（品牌标志）：

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a class="brand" href="#"><img src="../Content/Images/logo.png" /></a>
    </div>
</div>
</div>

如何使导航栏高度不变？我尝试过

.navbar .brand
{
display: block;
height: 125px;
width: 246px;
padding: 0;
background: url('../Content/Images/logo.png') no-repeat left center;
float:left;
position: absolute;
}

我在定位方面取得了良好的结果，但链接覆盖了标志。

- dseferlis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sherbrow · Accepted Answer

链接出现在标志图案上方

这是由于使用了绝对定位。

更新：不调整图片大小的情况下：

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

这里是没有调整图片大小的示例（jsfiddle）