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

这可能不是最优雅的＆＃34;解决方案，但由于您的导航栏始终是100像素的固定高度，因此您只需调整margin-top类的navbar-toggle值即可。

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

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

垂直对齐引导程序导航按钮

1 个答案: