Gat*_*too 67 navbar twitter-bootstrap 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显示在导航栏下方,因此无法正常工作.
And*_*ich 71
您还必须将"navbar-brand"类添加到图像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>
Sim*_*ham 55
在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>
小智 13
您应该删除navbar-fixed-top类,否则导航栏会固定在您想要徽标的页面顶部.
如果要在导航栏中放置徽标:
默认情况下,导航栏高度(在@navbarHeightLESS变量中设置)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,则还必须修复样式表.
如果你在LESS中这样做:
.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
| 归档时间： |
|
| 查看次数： |
150548 次 |
| 最近记录： |