带徽标的Bootstrap 3 Navbar

Question

我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏.在不引起不同屏幕尺寸问题的情况下,这样做的正确方法是什么？我认为这是一个常见的要求,但我还没有看到一个好的代码示例.除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性.

我试过把一个IMG标签放在带有navbar-brand类的A标签内,但这导致菜单在我的Android手机上无法正常运行.我也试过增加导航栏类的高度,但这更加困难了.

顺便说一句,我的徽标图像大于导航栏的高度.

Answer 1

为什么每个人都试图以艰难的方式去做？当然,其中一些方法可行,但它们比必要的更复杂.

好的,首先 - 您需要一个适合您的导航栏的图像.您可以通过css height属性调整图像(允许宽度比例),也可以使用尺寸合适的图像.无论你决定做什么 - 它的外观取决于你的图像大小.

出于某种原因,每个人都希望将图像粘贴在锚点内navbar-brand,这不是必需的. navbar-brand应用图像不必要的文本样式以及navbar-left类(就像拉左,但用于导航栏).你真正需要的是添加navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

您甚至可以使用导航栏品牌项目进行操作,该项目将显示在图像的右侧.

Answer 2

<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="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Answer 3

完整的演示与许多例子

重要更新:2015年12月21日

我目前在Mozilla中发现了一个错误,它在某些浏览器宽度上打破了导航栏,在此页面上有很多DEMOS.基本上,mozilla bug包括导航栏品牌链接上的左右填充作为图像宽度的一部分.但是,这可以很容易地修复,我已经测试了这一点,我相当肯定它是这个页面上最稳定的工作示例.它会自动调整大小并适用于所有浏览器.

只需将此添加到您的CSS并使用navbar-brand,就像您一样.img-responsive.您的徽标将自动适合

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

另一种选择是使用背景图像.使用任何大小的图像,然后只需设置所需的宽度:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

下面的原始答案(仅供参考)

人们似乎忘记了很多物体.我个人认为这是最容易使用的,因为图像会自动调整到菜单大小.如果您只是在图像上使用对象,它将自动调整大小到菜单高度.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

有人指出,这在IE"尚未"中不起作用.有一个polyfill,但如果你不打算将其用于其他任何东西,这可能会过多.对于IE的未来版本来说,它看起来似乎正在计划对象,所以一旦发生这种情况,这将适用于所有浏览器.

但是,如果您注意到bootstrap中的.img响应类,则max-width假定您将这些图像放在列中或具有显式set的内容中.这意味着100%具体表示父元素的100%宽度.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

我们不能在导航栏中使用它的原因是因为父(.navbar-brand)具有50px的固定高度,但宽度未设置.

如果我们采用这种逻辑并将其反转为基于高度的响应,我们可以具有缩放到.navbar品牌高度的响应图像,并且通过添加和自动设置宽度,它将调整为比例.

max-height: 100%;
width: auto;

通常我们必须添加display:block;到场景中,但因为navbar-brand已经浮动:left; 应用于它,它自动充当块元素.

您可能会遇到徽标太小的罕见情况.img-responsive方法没有考虑到这一点,但我们会.通过将"高度"属性添加到.navbar-brand > img您可以确保它将向上和向下扩展.

max-height: 100%;
height: 100%;
width: auto;

所以为了完成这个,我把它们放在一起,它似乎在所有浏览器中都能很好地工作.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Answer 4

虽然你的问题很有意思,但我不认为会有一个答案.也许你的问题太宽泛了.您的解决方案应取决于:导航栏中的其他内容(项目数量),徽标大小,徽标是否响应等等.在a中添加徽标(使用navbar-brand)似乎是一个很好的起点.我应该使用navbar-brand类,因为这将添加15像素的填充(顶部/底部).

我在http://getbootstrap.com/examples/navbar/上测试了这个设置,标识为300x150像素.

全屏> 1200:

在768和992像素之间(菜单未折叠):

<768(菜单已折叠)

除了审美方面,我没有发现任何技术问题.在小屏幕上,大徽标可能会重叠或突破视口.当内容不符合一行时,768和992像素之间的屏幕也有其他问题,例如:https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

默认导航栏具有默认导航栏示例添加30px的底部边距,因此导航栏的内容不应与页面内容重叠.(当导航栏的高度变化时,固定的导航栏会出现问题).

您将需要一些css和媒体查询来根据不同屏幕尺寸的需要调整导航栏.请尝试缩小您的问题范围.描述你在android上发现的问题.

更新请参见http://bootply.com/77512以获取示例.

在较小的屏幕(如手机)上,折叠的菜单显示在徽标上方

在代码中更换按钮和徽标,首先是徽标(设置浮动:徽标左侧)

没有办法将菜单项对齐除top之外的任何内容

设置margin-top为.navbar-collapse ul.使用徽标高度减去导航栏高度,以对齐底部或(徽标高度 - 导航栏高度)/ 2到中心

Answer 5

说明如何创建徽标大于默认高度(50px)的引导导航栏:

标识为100px x 100px,标准CSS的示例:

1. 计算徽标的高度和(填充顶部+填充底部).这里120px(100px高度+填充顶部(10px)+填充底部(10px))

2. 转到bootstrap /自定义.设置而不是导航栏高度 50px> 120px(50 + 70)和navbar-collapse-max-height从340px到410px(340 + 70).下载 css.

3. 在这个例子中,我使用这个导航栏.在navbar品牌:

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...
   

   添加一个类,例如myLogo和一个img(您的徽标)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

4. 添加CSS

   .myLogo {padding:10px; }

5. 适合其他尺寸.

例

Answer 6

好吧,我终于解决了同样的问题,这是我的解决方案,我在我的网站上测试了所有三个主要浏览器:Chrome,Firefox和Internet Explorer.

首先,如果你没有使用基于文本的徽标,那么完全删除"navbar-brand",因为我发现这个特定的类是我折叠的导航菜单加倍的主要原因.

向用户3137032致敬,引导我朝着正确的方向前进.

你必须制作一个自定义的响应式图像容器,我称之为"logo"

以下是引导程序HTML标记:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

和CSS代码:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

@media(max-width:x)中的值可能会有所不同,具体取决于您的徽标图片宽度,我的是368px.根据徽标的大小,可能还需要更改百分比.第一个@media查询应该是你的阈值,我的是图像宽度(368px)+折叠按钮大小(44px)+大约60px,它出现在480px,这是我开始响应图像缩放的地方.

请务必从HTML部分删除我的剃刀语法.让我知道如果它解决了你的问题,它就是我的问题.

编辑:对不起,我错过了导航栏高度问题.有几种方法可以解决这个问题,我个人用适当的导航栏高度编译Bootstrap LESS,为了我的目的,我使用70px,我的图像高度为68像素.第二种方法是在bootstrap.css文件本身,搜索".navbar"并将min-height:更改为徽标的高度.

Answer 7

我的解决方案是将imss"display:inline-block"添加到img标签中.

<img style="display: inline-block; height: 30px; margin-top: -5px">

演示:jsfiddle

Answer 8

我使用img-responsive类,然后在a元素上设置最大宽度.像这样:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

和CSS:

.navbar-brand {
    max-width: 50%;
}

Answer 9

您必须使用以下代码:

<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

A类标签必须是"徽标"而不是导航栏品牌.