垂直对齐Bootstrap导航按钮

Question

我在玩Bootstrap和响应式网站设计。 我有一个自定义导航栏（高度固定为100px），当我尝试将其折叠时，切换按钮未垂直对齐。

CSS：

.navbar {
  border : none;
  border-radius: 0;
  margin-bottom: 0;
}

.navbar-default {
  background-color: white;
}

.navbar-brand, .navbar-nav li a {
  line-height: 100px;
  height: 100px;
  padding-top: 0;
  margin-left: 30px;

  font-family: 'pacifico', cursive;
  font-size: 1.4em;
}

.navbar-brand img {
  width: auto;
  height: 100px;
}

和HTML：

    <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/app">
          <img src="img/brand.png">
        </a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
      </div>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li><a href="#/home">Home</a></li>
          <li><a href="#/tattoos">Tattoos</a></li>
          <li><a href="#/art">Art</a></li>
          <li><a href="#/life">Life with Mr.Rime</a></li>
        </ul>
      </div>
    </div>
  </nav>

有人可以帮忙吗？

Answer 1

这可能不是最“优雅”的解决方案，但是由于导航栏始终固定为100像素的高度，因此您可以简单地调整navbar-toggle类的margin-top值。

看起来您的“汉堡包”按钮的高度为34像素，因此您只需将以下内容添加到CSS文件中：

.navbar-toggle {
    margin-top: 33px;
}