Question

我在导航栏中放置了一个50px高的徽标，我将导航栏的高度调整为75px内联。但是，现在菜单项被推到顶部。有没有办法让所有东西都垂直居中，让按钮的高度合适？

我在其他帖子中尝试了一些在线发布的解决方案，但似乎没有一个对我有用。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top" >
      <div class="navbar-inner" style="height:75px;" >
        <div class="container" >
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#"><img src="static/img/navbar-logo.png"> Epiphany.ai</a>
          <div class="nav-collapse collapse" >
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form pull-right">
              <input class="span2" type="text" placeholder="Email">
              <input class="span2" type="password" placeholder="Password">
              <button type="submit" class="btn">Sign in</button>
            </form>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="code/js/bootstrap.js"></script>
  </body>
</html>

这是一个截图：

自定义Bootstrap中导航栏的高度，所有内容都垂直居中

0 个答案: