你必须像这样使用代码:

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

在我的情况下，没有让任何其他答案工作(我可能没有通过智力测试)，经过一些实验，这是我正在使用的(我相信非常接近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(在这种情况下，没有< >标记)。

我使用img-responsive类，然后在a元素上设置max-width。是这样的:

<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%;
}

您可以尝试使用如下所示的@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;
}
}

快速修复:为你的logo创建一个类，并设置高度为28px。这适用于所有设备上的导航栏。注意，我说的是“WELL”。

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

我没有替换文本标记，而是像下面的代码一样分成两行，并将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;
}

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