具有徽标的Bootstrap 3导航栏

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

我尝试仅将IMG标签放在具有navbar-brand类的A标签内，但这导致菜单在我的android手机上无法正常运行。我还尝试增加导航栏类的高度，但这使事情变得更糟。

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

为什么每个人都试图用困难的方式做到这一点？当然，其中一些方法会起作用，但是它们比必需的更为复杂。

好的，首先-您需要一个适合导航栏的图像。您可以通过css height属性（允许宽度缩放）调整图像，也可以只使用适当大小的图像。无论您决定做什么，外观的方式将取决于您调整图像大小的能力。

由于某些原因，每个人都想使用来将图像粘贴到锚点内navbar-brand，而这不是必需的。 navbar-brand将不必要的文本样式以及图像应用于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>

包含许多示例的完整演示

重要更新：15/12/21

我发现Mozilla中存在一个错误，该错误通过此页面上的MANY DEMOS破坏了某些浏览器宽度上的导航栏。基本上，mozilla错误包括在navbar品牌链接上的左侧和右侧填充作为图像宽度的一部分。但是，可以很容易地解决此问题，并且我已经对此进行了测试，并且我很确定这是此页面上最稳定的工作示例。它将自动调整大小，并适用于所有浏览器。

只需将其添加到您的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-response类，则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已经具有float：left; 应用于它，它自动充当一个块元素。

您可能会遇到徽标太小的罕见情况。img响应方法没有考虑到这一点，但我们会考虑。通过还将“ height”属性添加到，.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>

演示 http://codepen.io/bootstrapped/pen/KwYGwq

尽管您的问题很有趣，但我不希望有一个答案。也许您的问题太笼统了。您的解决方案应取决于：导航栏中的其他内容（项目数），徽标的大小，徽标是否应具有响应性，等等。在徽标中添加徽标（带有Navbar品牌）似乎是一个不错的起点。我应该使用navbar-brand类，因为这将添加15像素的填充（顶部/底部）。

我在带有300x150像素徽标的http://getbootstrap.com/examples/navbar/上测试了此设置。

全屏> 1200：

在768至992像素之间（菜单未折叠）：

<768（菜单已折叠）

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

默认导航栏具有默认导航栏示例添加了30px的底边距，因此导航栏的内容绝不应与页面内容重叠。（固定的导航栏将在导航栏的高度变化时出现问题）。

您将需要一些CSS和媒体查询，以使导航栏适应不同屏幕尺寸的需求。请尝试缩小您的问题。描述您在android上发现的问题。

更新请参见http://bootply.com/77512。

在手机等较小的屏幕上，折叠菜单出现在徽标上方

交换按钮和代码中的徽标，首先更改徽标（在徽标上设置float：left）

除了顶部以外，没有其他方法可以使菜单项对齐

设置margin-top为.navbar-collapse ul。使用徽标高度减去导航栏高度，使其与底部对齐或（徽标高度-导航栏高度）/ 2与中心对齐

说明如何创建徽标大于默认高度（50px）的引导导航栏：

徽标为100px x 100px的示例，标准CSS：

1. 计算徽标的高度和（填充顶部+填充底部）。在这里120像素（高度100 像素 +顶部填充（10像素）+底部填充（10 像素））

2. 转到bootstrap / customize。而不是将导航栏高度设置为50px> 120px（50 + 70），并将navbar-collapse-max-height从340px设置为410px（340 + 70）。下载 css。

3. 在此示例中，我使用此navbar。在navbar-brand中：

     <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. 足以满足其他尺寸。

例

好吧，我终于遇到了同样的问题，这是我的解决方案，我在所有三种主要浏览器（Chrome，Firefox和Internet Explorer）的站点上对其进行了测试。

首先，如果您不使用基于文本的徽标，请完全删除“ navbar-brand”，因为我发现该特定类是我的折叠式nav菜单翻倍的主要原因。

向user3137032大喊，以引导我朝正确的方向发展。

您必须制作一个自定义的响应式图像容器，我称其为“徽标”

这是引导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中的值（最大宽度：x）可能会根据徽标图像的宽度而有所不同，我的是368px。根据徽标的大小，可能还需要更改百分比。第一个@media查询应该是您的阈值，我的是图像宽度（368px）+折叠按钮大小（44px）+大约60px，结果是480px，这是我开始响应式图像缩放的地方。

请确保从HTML部分中删除我的剃刀语法。让我知道它是否解决了您的问题，也解决了我的问题。

编辑：对不起，我想念您的导航栏高度问题。有几种解决方法，我个人使用适当的导航栏高度编译Bootstrap LESS，出于我的目的，我使用70px，图像高度为68 px。第二种方法是在bootstrap.css文件本身中，搜索“ .navbar”，然后将min-height：更改为徽标的高度。

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

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

演示：jsfiddle

我使用img响应类，然后在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%;
}

您必须使用以下代码：

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

这取决于您想要徽标的高度。

<a>导航height: 20px栏中的默认高度为20像素，因此，如果您在徽标上指定高度，则会很好地显示。

但这对于徽标来说有点小，所以我选择的是：

<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="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

这使图像高30像素，并通过在顶部添加负边距来使图像垂直对齐（5像素是a上的填充与图像尺寸之间的差值的一半）。

或者，您可以更改<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="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

快速修复：为您创建一个类，logo并将其设置height为28px。这与所有设备上的导航栏均适用。注意，我说的是“ WELL”。

.logo {
  display:block;
  height:28px;
}

我的方法是为电话，平板电脑，台式机，大型台式机提供四张不同大小的不同图像，但仅使用引导程序的响应实用程序类显示一张，如下所示：

<!--<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代码。

编辑注2：是的，这会在加载页面时向服务器添加请求，这可能会减慢速度，但是如果您使用背景CSS精灵技术，则在打印页面时可能不会打印徽标，并且上面的代码应该会更好的SEO。

您不需要添加其他CSS，因为Bootstrap3确实提供了它。除非您确实要添加它。这是我将徽标放在左侧并在右侧链接时的代码。此导航是响应式的。对此进行适当的更改。

HTML：

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

我也通过CSS背景属性实现它。它可以在任何宽度值下恢复健康。

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

另一种方法是在以下方面实现Bootstrap的内置.text-hide类：.navbar-brand用背景图片替换品牌文字/内容。

CSS：

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML：

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

这是一种非常一致的方法，可以使图像居中。要调整图像的大小，您要做的就是调整.navbar-brand宽度，因为已经设置了高度。

这是现场演示

我有同样的问题。我这样解决了：

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

没有导航栏品牌类别。结果看起来像适合导航栏的徽标图片，并且像链接一样工作。另外，我建议对菜单项使用navbar-right类，这样它们就不会位于徽标下方。

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

也许这太简单了，但是我只是复制了navbar品牌行，所以其中有两个，即图像和文本。

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

如果使用LESS，则可以：

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

如果您需要在工具栏中看到品牌居中且具有自动宽度的代码，则此代码非常适合。它包含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">

将以下内容添加到.navbar-brand类中

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

我的工作代码-引导程序3.0.3。导航栏切换时，隐藏xs原始徽标图像。

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

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

首先添加徽标类，然后使用@media指定每个设备尺寸的徽标高度和宽度。在下面的示例中，我针对最大宽度为320px（iPhone）的设备，您可以使用它直到找到最合适的设备。简单的测试方法：将chrome或Firefox与inspect元素一起使用。尽可能缩小浏览器。观察基于您指定的@media最大宽度的徽标大小更改。在iPhone，Android设备，iPad等上进行测试，以获得所需的结果。

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

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

请尝试以下代码：

<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的默认值非常接近）：

   <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替换它（<a>在这种情况下，没有标签）。

这不是语义，而是仅使用现有的 a元素，设置背景图像，然后为@ 2x分辨率，较小的屏幕尺寸等创建多个变体。

然后，您可以使用.text-hide该类以时尚的方式在页面上获取一些文本。简单有效，但不正确使用图像。

这是用于文本替换的辅助类的链接：

http://getbootstrap.com/css/#helper-classes

此问题最简单，最好的答案是根据徽标设置最大宽度和高度，图像的最大高度为50px，但不能超过200px。

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

这将取决于徽标大小和导航栏项目。

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

请您自己理解代码：D这是我的代码草稿，并且已经在起作用:)这是屏幕截图。

代替下面的代码，我代替了文字商标，将其分成两行，并为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;
}

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

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <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>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

//不要忘记在代码的开头添加引导程序。