我想使用Bootstrap 3默认导航栏的图像标志,而不是文本品牌。什么是正确的方法来做到这一点,而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求,但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外,一个关键要求是小屏幕上的菜单可折叠性。

我试着在有navbar-brand类的A标签内放置一个IMG标签,但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度,但这把事情搞砸了。

顺便说一下,我的logo图像比导航栏的高度要大。


当前回答

你必须像这样使用代码:

<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类标签必须是“logo”而不是navbar-brand。

其他回答

也许这太简单了,但我只是复制了navbar-brand行,所以有两个,图像和文本。

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

我创建了一个图像,适合在导航栏(大约1/2的高度)。

这段代码工作完美,如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的Wordpress函数:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

您可以尝试使用如下所示的@media查询。

首先添加一个logo类,然后使用@media指定每个设备大小的logo高度和宽度。在下面的例子中,我的目标设备的最大宽度为320px (iPhone),你可以玩这个,直到你找到最合适的。简单的测试方法:使用带有inspect元素的chrome或Firefox。尽可能缩小你的浏览器。根据您指定的@media max width观察徽标大小的变化。在iPhone, android设备,iPad等上进行测试,以获得理想的结果。

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

你必须像这样使用代码:

<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类标签必须是“logo”而不是navbar-brand。

为什么每个人都想用艰难的方式来做?当然,其中一些方法是有效的,但它们比必要的要复杂得多。

好的,首先,你需要一个图像,将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放),或者你可以只使用一个适当大小的图像。无论你决定做什么,这看起来将取决于你的图像大小。

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

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

你甚至可以用一个导航栏品牌项目,它将出现在图像的右侧。