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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11816819/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:41:39  来源:igfitidea点击:

Put a logo on twitter bootstrap navbar without resizing the navbar

csstwitter-bootstrap

提问by dseferlis

Is there any way to put an image (brand logo) on bootstrap's navbar like:

有没有办法在引导程序的导航栏上放置图像(品牌徽标),例如:

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

and keep the navbar height untouched? I tried

并保持导航栏高度不变?我试过

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

and i have good results with the positioning but the links come over the logo.

我在定位方面有很好的结果,但链接来自徽标。

回答by Sherbrow

the links come over the logo

链接来自徽标

This is caused by the absolute positioning.

这是由绝对定位引起的。

UpdateWithout resizing the image :

更新而不调整图像大小:

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

Demo without resizing image (jsfiddle)

不调整图像大小的演示(jsfiddle)