导航栏顶部的 Twitter-Bootstrap-2 徽标图像答案

【问题标题】：Twitter-Bootstrap-2 logo image on top of navbar导航栏顶部的 Twitter-Bootstrap-2 徽标图像
【发布时间】：2025-11-29 06:35:01
【问题描述】：

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

  <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 显示在导航栏下方。

【问题讨论】：

标签： twitter-bootstrap navbar twitter-bootstrap-2

【解决方案1】：

您还必须将“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>

【讨论】：

我的图像出现问题，导致导航栏高于没有图像时的水平。图片本身不高于导航栏的原始高度...有什么想法吗？
@gardenofwine 制作图像width:100%，以便它可以根据需要扩展（在导航栏边界内）。
不应该是class="navbar-brand" 按照：getbootstrap.com/components/#navbar-default
@jnthnclrk：这篇文章来自 2012 年，因此引用 getbootstrap.com/2.3.2/components.html#navbar
@swege 当时的答案已经过时，不应再成为公认的答案。该问题未提及特定版本。现在任何正在谷歌搜索解决方案的人都不会关心几年前曾经工作过的东西。我们想知道如何使用最新的框架来实现它。旧框架版本的解决方案仅供参考。

【解决方案2】：

在 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>

【讨论】：

你的url需要"'"
@NoIdeaForName 不，你没有

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

我在 bootstrap 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>

【讨论】：

谢谢，我喜欢这个解决方案，因为它删除了所有冗余容器和诸如
。我想补充一点，图像可以大于 50px，但是如果你想使用这么大的图像，你应该在你的 css 中指定它——比如：#nav_brand_profile_pic { height: 40px; padding-top: 5px; }