导航栏顶部的Twitter-Bootstrap-2徽标图片

Question 1

有人可以建议我如何将徽标图像放置在导航栏的顶部吗？我的标记：

  <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，因此无法正常工作。

Question 2

您还必须在图像a容器中添加“ navbar-brand”类，还必须将其包含在.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>

Question 3

覆盖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>

Question 4

您应该删除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

Question 5

我在引导程序3.2.0上将此代码用于导航栏，图像最高应为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>

Question 6

如果不增加导航栏的高度。

 .navbar .brand {
 position: fixed;    
 overflow: visible;
 padding-left: 0;    
 padding-top: 0;
 }

参见http://jsfiddle.net/petrfox/S84wP/