小编Rob*_*ott的帖子

Bootstrap 3:当Logo增加Navbar的高度时,垂直中心导航链接

我是bootstrap框架的新手.

Logo增加NavBar的高度:

在我的导航栏中,我插入了一个高度为50px的徽标.这显然使导航栏更高.我没有为此调整任何CSS,它只是强制增加高度的徽标.

问题:

导航栏中的链接与现在较高的导航栏的顶部对齐.

目标:

我希望链接在导航栏中垂直居中,因为它看起来会更好.


我的假设是使用行高值或填充.然而,这引入了仍然在移动浏览器上生效的问题(当它切换到切换菜单时),因此我的扩展菜单结果太高,看起来很傻.

非常感谢任何见解?

我的CSS是使用最新版本3.0.2下载的默认引导程序CSS.

这是我的HTML:

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

当我真的希望它们在中心垂直对齐时,正是那些与顶部对齐的"链接1","链接2","链接3"和"链接4"链接.

css twitter-bootstrap twitter-bootstrap-3

53
推荐指数
2
解决办法
10万
查看次数