Aligning navigation elements with logo - Bootstrap 3

Question

I'm using Bootstrap 3 to construct a responsive menu like so:

Logo Link 1 Link 2 Link 3 Link 4 (scales down to toggle in smaller devices)

The following does that, except when I choose to go with a larger logo image (440px by 140px) two problems occur 1) The navigation menu items rise to the top 2) In smaller devices, the logo doesn't seem to be responsive (doesn't scale down to fit screen)

Desktop view:

Mobile view:

My goals are 1) logo and links aligned vertically on the same line 2) logo scales down to smaller size to make room for navigation toggle

<div class='jumbotron grey-bg'>
    <div class='container-fluid'>
      <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
          <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="#">My Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="main-nav-bar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class='active'><a href='#'>Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href='#'>Link 4</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
      </nav>
    </div><!-- /.container-fluid -->
  </div><!--- end jumbotron -->
/* logo */
.navbar-brand {
  width: 440px;
  height: 140px;
  background: url(img/logo.jpg) no-repeat;
  text-indent: -999px;
  padding: 0px;
  margin: 0px;
}
/* end */

/* navigation */
.navbar-default {
  border: none;
  padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
  color: #666;
  padding: 11px 0;
  text-align: center;
}

.navbar-default .navbar-nav>li>a:hover {
  text-decoration: underline;
  color: #666;
}
/* end */

img {
  display: block;
  height: auto;
  max-width: 100%;
}

Answer 1

如果您希望图像具有响应性，请不要使其成为背景图像（包含在html中），并添加“ img-sensitive”类：

<a class="navbar-brand" href="#"><img src="img/logo.jpg" class="img-responsive"></a>