Twitter-Bootstrap-2导航栏顶部的徽标图像
Twitter-Bootstrap-2导航栏顶部的徽标图像
提问于 2012-03-28 00:29:53
有人能建议我如何在导航栏的顶部放置徽标图像吗？我的标记：
<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显示在导航栏下方时，它无法正常工作。
回答 4
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用户
发布于 2014-09-25 02:59:32
我在bootstrap 3.2.0上对navbar使用了这个代码，图像最多应该是50px高，否则它会使标准的bs导航栏出血。
请注意，我故意不使用class='navbar-brand‘，因为这会在图像上引入填充
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="" href="/"><img src='img/anyWidthx50.png'/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active Link</a></li>
<li><a href="#">More Links</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9893723
复制相关文章
相似问题
腾讯云开发者
