引导navbars按钮垂直对齐

<nav class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" 
          data-toggle="collapse" data-target="#navbar" 
          aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Grumblr</a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-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" role="button" 
           aria-haspopup="true" aria-expanded="false">Dropdown 
           <span class="caret"></span></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 role="separator" class="divider"></li> 
           <li class="dropdown-header">Nav header</li> 
           <li><a href="#">Separated link</a></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </li> 
        </ul> 
        <ul class="nav nav-pills pull-right"> 
         <li role="presentation" class="active"><a 
           href="#">test1</a></li> 
         <li role="presentation"><a href="#">test2</a></li> 
         <li role="presentation"><a href="#">test3</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav>

三个按钮test1，test2，test3应该是在导航栏的右侧和垂直对齐中间。但它看起来很喜欢： img here 引导navbars按钮垂直对齐

它有任何CSS类可以使它自动对齐？其实我是新来的CSS，只是想快速建立我的用户界面使用bootstrap .....

来源

2017-09-02 Ziqi Liu

你测试过改变它们的高度吗？ – z3nth10n

@ Ziqi，这是一个链接到codeply project，实现您的导航栏。它只是一个CSS类，用于在按钮和导航栏顶部之间添加边距。

来源

2017-09-02 02:18:46 cwanjt

使用高度和填充到您的锚标记

.nav-pills a{ 
    padding-top: 17px !important; 
    padding-bottom: 17px !important; 
    height: 54px !important; 
}

，或者你可以给类锚标记，并使用这个CSS。你可以检查另一个锚标签，你可以看到相同的css

来源

2017-09-02 02:27:31

引导navbars按钮垂直对齐

回答

相关问题