首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Twitter-Bootstrap-2导航栏顶部的徽标图像

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

Stack Overflow用户
提问于 2012-03-28 00:29:53
回答 4查看 151.1K关注 0票数 67

有人能建议我如何在导航栏的顶部放置徽标图像吗?我的标记:

代码语言:javascript
复制
  <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显示在导航栏下方时,它无法正常工作。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-03-28 00:50:35

您还必须将“navbar- a”类添加到您的图像a容器中,还必须将其包含在.navbar-inner容器中,如下所示:

代码语言:javascript
复制
 <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>
票数 72
EN

Stack Overflow用户

发布于 2012-03-29 16:50:50

在bootstrap.css或新的CSS文件中覆盖品牌类,如下所示-

代码语言:javascript
复制
.brand
{
  background: url(images/logo.png) no-repeat left center;
  height: 20px;
  width: 100px;
}

你的html应该看起来像-

代码语言:javascript
复制
<div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>
票数 55
EN

Stack Overflow用户

发布于 2014-09-25 02:59:32

我在bootstrap 3.2.0上对navbar使用了这个代码,图像最多应该是50px高,否则它会使标准的bs导航栏出血。

请注意,我故意不使用class='navbar-brand‘,因为这会在图像上引入填充

代码语言:javascript
复制
<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>
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9893723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档