Twitter-Bootstrap-2在导航栏顶部的标志图像
有人可以build议我怎样才能在导航栏的顶部放置一个标志图像？ 我的标记：
<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显示在导航栏下方。
您还必须将“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>
覆盖品牌类，在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>
您应该删除navbar-fixed-top类别，否则导航栏将保持固定在您想要标志的页面顶部。
如果你想在导航栏中放置标志：
@navbarHeight高度（在@navbarHeight LESSvariables中40px ）默认为@navbarHeight 。 您的徽标必须放在里面，否则您必须先将导航栏放在更高的位置。
然后使用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>
如果您的徽标高于20 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
我在bootstrap 3.2.0上使用这个代码导航栏，图像应该至多50px高，否则它会stream血的标准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>
如果你不增加导航栏的高度..
.navbar .brand { position: fixed; overflow: visible; padding-left: 0; padding-top: 0; }
