在twitter bootstrap导航栏上放置一个徽标,而不调整导航栏的大小

时间:2012-08-05 13:26:29

标签: css3 twitter-bootstrap

有没有办法在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;
}

我的定位效果不错,但是链接来自徽标。

1 个答案:

答案 0 :(得分:31)

  

链接来自徽标

这是由绝对定位造成的。

更新,无需调整图片大小:

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

Demo without resizing image (jsfiddle)