html - 将 Bootstrap Navbar 的高度更改为 85px 并保持垂直对齐

Question

我的 Bootstrap 导航栏出现了一些问题。我希望导航栏的高度为 85px， Logo 和 li 元素在 85px 中垂直居中。我似乎无法让它正常工作。

我想要的一个很好的例子是 https://devmounta.in/导航栏

HTML:

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">
        <img src="css/images/logo.png">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="item"><a href="#">About</a></li>
        <li id="item"><a href="#">Stats</a></li>
        <li id="item"><a href="#">Drivers</a></li>
        <li id="item"><a href="#">Facts</a></li>
        <li id="btn"><a href="#">Pledge Now</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS:

header{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background-color: #66CCFF;
 border-bottom: 1px solid rgba(102, 204, 255, .9);
 width: 100%;
 z-index: 10;
 box-sizing: border-box;
}

.navbar-default {
 background: 0 0;
 border: none;
 display: block;
 margin-bottom: 0;
}

.container-fluid {
 padding: 0;
 width: 90%;
 margin: 0 auto;
}

Answer 1

像这样？

https://jsfiddle.net/xwthov5s/

header{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background-color: #66CCFF;
 border-bottom: 1px solid rgba(102, 204, 255, .9);
 width: 100%;
 z-index: 10;
 box-sizing: border-box;
}

.navbar-default {
 background: 0 0;
 border: none;
 display: block;
 margin-bottom: 0;
}

.container-fluid {
 padding: 0;
 width: 90%;
 margin: 0 auto;
}
ul.navbar-nav{
    height:85px;
}
ul.navbar-nav li{
    line-height:85px;
}
.navbar-brand{
    display:block;
    height:85px;
    line-height:85px;
    padding-top: 0;
    padding-bottom: 0;
    }

    .navbar-default .navbar-nav li>a {
    color: #777;
    line-height: 85px;
    padding-top: 0;
    display:block;
    height:85px;
    padding-bottom: 0;
    }