Twitter-Bootstrap-2导航栏顶部的徽标图像
有人能建议我如何在导航栏的顶部放置徽标图像吗？我的标记：
<body>
<a href="index.html"> <img src="images/57x57x300.jpg"></a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">当57x57x300.jpg显示在导航栏下方时，它无法正常工作。
回答 5
Stack Overflow用户
发布于 2012-03-28 00:50:35
您还必须将“navbar- a”类添加到您的图像a容器中，还必须将其包含在.navbar-inner容器中，如下所示：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
</div>
</div>
</div>Stack Overflow用户
发布于 2012-03-29 16:50:50
在bootstrap.css或新的CSS文件中覆盖品牌类，如下所示-
.brand
{
background: url(images/logo.png) no-repeat left center;
height: 20px;
width: 100px;
}你的html应该看起来像-
<div class="container-fluid">
<a class="brand" href="index.html"></a>
</div>Stack Overflow用户
发布于 2012-09-11 06:04:40
你应该删除navbar-fixed-top类，否则导航栏停留在页面顶部你想要的徽标。
如果要在导航栏中放置徽标，请执行以下操作：
默认情况下，导航栏高度(在@navbarHeight中设置的变量较少)为40px。你的标志必须适合里面，否则你必须使导航栏更高。
然后使用brand类：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
</div>
</div>
</div>如果您的徽标高于20px，则还必须修复样式表。
如果你在更短的时间内做到这一点：
.navbar .brand {
@elementHeight: 32px;
padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
}@elementHeight应设置为您的图像高度。
填充计算取自Twitter Bootstrap LESS - https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52
或者，您可以自己计算填充值，并使用纯CSS。
这适用于Twitter Bootstrap版本2.0.x，应该也适用于2.1版本，但填充计算略有变化：https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50
https://stackoverflow.com/questions/9893723
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号