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

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

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


当前回答

我的解决方案是添加css“display: inline-block”到img标签。

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

演示:杰斯菲德尔

其他回答

我的工作代码- bootstrap 3.0.3。 当导航条切换,隐藏的x原始标志图像。

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

我没有替换文本标记,而是像下面的代码一样分成两行,并将img-responsive类赋予图像......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

此外,我添加了以下css代码.......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

如果我的代码解决了您的问题,这是我的荣幸.....

在我的情况下,没有让任何其他答案工作(我可能没有通过智力测试),经过一些实验,这是我正在使用的(我相信非常接近Bootstrap默认值):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

在CSS文件中,我添加了以下内容:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

注意@Html.ActionLink()是一个<a>标记的Razor语法。当它说@Html.ActionLink(…)时,只需将其替换为适当的<a>标记。同样,当它说@Url.Action(…)时,将其替换为适当的URL(在这种情况下,没有< >标记)。

请尝试以下代码:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

我的方法是为手机、平板电脑、台式机、大型台式机包括四张不同大小的图像,但只显示一张使用bootstrap的响应实用程序类,如下所示:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

注意:您可以用所提供的代码替换注释行。如果不使用wordpress,请替换php代码。

编辑Note2:是的,这会在加载页面时向服务器添加请求,这可能会变慢一点,但如果你使用后台css精灵技术,打印页面时很可能不会打印logo,上面的代码应该会得到更好的SEO。