带标志的Bootstrap 3导航栏

我想使用带有图像徽标的Bootstrap 3默认导航栏代替文本品牌。 这样做的正确方法是什么，而不会导致不同屏幕尺寸的问题？ 我认为这是一个共同的要求，但我还没有看到一个好的代码示例。 除了在所有屏幕尺寸上具有可接受的显示外，其他关键要求是在较小屏幕上的菜单可折叠性。

我尝试在带有navbar品牌类的A标签内部放置IMG标签，但导致菜单无法在我的android手机上正常运行。 我也尝试增加navbar类的高度，但是更糟糕的是，

顺便说一下，我的标志图片比导航栏的高度大。

---

为什么每个人都试图做到这一点？ 当然，其中一些方法可行，但它们比必要的更复杂。

好的，首先 - 你需要一张适合你的导航栏的图片。 您可以通过CSS高度属性（允许宽度缩放）调整图像，或者只使用适当大小的图像。 无论你决定做什么 - 这看起来的方式取决于你如何确定你的形象。

出于某种原因，每个人都想要将navbar-brand的图片粘贴到navbar-brand ，这不是必需的。 navbar-brand应用不需要图像的文本样式，以及navbar-left类（就像navbar-left ，但用于导航栏）。 你真正需要的是添加navbar-left 。

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

您甚至可以使用导航条品牌项目来追踪此项目，该项目将显示在图像的右侧。

---

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

---

用许多示例完成演示

重要更新：12/21/15

目前Mozilla中存在一个错误，我发现在某些浏览器宽度上打开导航栏时会显示MANNING 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版本计划对象适合，所以一旦发生这种情况，这将适用于所有浏览器。

但是，如果您在引导程序中注意到.img-responsive类，则最大宽度假设您将这些图像放入列中或具有显式设置的某些内容。 这意味着100％具体意味着父元素的100％宽度。

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

我们无法在导航栏中使用它的原因是父级（.navbar-brand）的高度固定为50px，但宽度未设置。

如果我们采取这种逻辑并将其反转为基于高度进行响应，那么我们可以获得一个响应图像，该图像可扩展到.navbar品牌高度，并通过添加和自动设置宽度来调整比例。

max-height: 100%;
width: auto;

通常我们必须添加display:block; 到场景，但由于navbar品牌已经浮动：左; 应用于它，它会自动作为一个块元素。

---

您可能会遇到您的徽标太小的罕见情况。 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

链接地址: http://www.djcxy.com/p/89449.html

上一篇: Bootstrap 3 Navbar with Logo

下一篇: How to set bootstrap navbar active class with Angular JS?