你必须给予它更小的宽度在小屏幕上像

@media (max-width:768px){
 .navbar-brand img{
   width:100px;
   max-height:50px;
 }
}

我通过编辑彼得·威尔逊的建议解决了这个问题。以下是有效的方法：

@media (max-width:768px){
        .navbar-brand{
       width:70vw!important;
      }
    }

我使用一个大的标志，并使用以下代码和css为我的：
style.css

.logo-img {
  max-width: 200px;
  margin-top: -10px;
}

header.html

<nav class="navbar navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
        <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="#/"><img class="logo-img" src="PATH_TO_YOUR_IMAGE"></a>
    </div>
  </div>
</nav>

其中PATH_TO_YOUR_IMAGE是图片

显然，上面没有工作，直到我把margin-bottom或padding-bottom，这推动了约束图像在底部以上的导航栏底部和对齐没有突出外。

@media(max-width: 768px){
    .navbar-brand img{
      width: 100px;
      max-height: 60px;
      /*padding-bottom: 20px;*/
      padding-bottom: 20px;
    }
  }