引導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按鈕垂直對齊

回答

相關問題