在twitter的bootstrap导航栏上放置一个标志，而不调整导航栏的大小 [英] Put a logo on twitter bootstrap navbar without resizing the navbar

问题描述

有什么方法可以在bootstrap的导航栏上添加图片（品牌标志），如：

 < div class = navbar navbar-fixed-top> 
< div class =navbar-inner> 
< div class =container> 
< a class =brandhref =＃>< img src =../ Content / Images / logo.png/>< / a> 
< / div> 
< / div> 
< / div> 
  

并保持navbar高度不变？
我尝试了

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

我有很好的结果与定位，但链接过来的标志。

解决方案

链接出现在徽标上

这是由绝对定位造成的。

更新 >

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

演示未调整图片大小（jsfiddle）

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.

解决方案

the links come over the logo

This is caused by the absolute positioning.

Update Without resizing the image :

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

Demo without resizing image (jsfiddle)

这篇关于在twitter的bootstrap导航栏上放置一个标志，而不调整导航栏的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！