将导航元素与徽标对齐 - Bootstrap 3

Question

我使用Bootstrap 3来构建响应式菜单，如下所示：

Logo Link 1 Link 2 Link 3 Link 4（缩小以在较小的设备中切换）

以下情况确实如此，除非我选择使用更大的徽标图像（440px×140px），否则会出现两个问题1）导航菜单项升至顶部2）在较小的设备中，徽标不会出现问题似乎是敏感的（不缩小以适应屏幕）

桌面视图

移动视图

我的目标是1）徽标和链接在同一条线上垂直对齐2）徽标缩小到较小的尺寸，以便为导航切换腾出空间

<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中）并添加课程＆＃34; img-responsive＆＃34;：

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