Bootstrap - 使導航欄鏈接區域匹配自定義導航欄的大小

我有自定義的引導程序導航欄。所以我已經將20px填充添加到導航欄的底部和頂部，我也設置了導航欄鏈接來更改懸停時的背景顏色。現在我遇到了以前添加的填充問題，當navbar鏈接懸停並且懸停時更改的背景顏色與導航欄的大小不匹配時，它周圍有空間。 screenshot我想讓導航欄鏈接的區域與我的自定義導航欄大小相同。如果有人能幫助我。這裏是Bootply fiddle 感謝Bootstrap - 使導航欄鏈接區域匹配自定義導航欄的大小

HTML file 
    <!-- Navbar start --> 
      <nav class="navbar navbar-inverse navbar-fixed-top" id="navbar"> 
       <div class="container"> 
        <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="#">brand</a> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li> 
           <a href="#"><i class="glyphicon glyphicon-search"></i></a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     <!-- Navbar end -->

CSS文件

#navbar{ 
    font-family: 'Roboto', sans-serif; 
    background-color: white; 
    border:none; 
    border-bottom: 1px solid #eaeaea; 
    transition: all 0.3s; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

#navbar .navbar-brand{ 
    font-family: 'Roboto', sans-serif; 
    font-weight: 700; 
    font-size: 22px; 
    color: coral; 
    text-transform: uppercase; 
} 

#navbar li a { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #484651; 
    font-size: 12px; 
    transition: all 0.4s; 
} 


#navbar li:hover a:hover{ 
    background-color: #303036; 
    color: white; 
}

來源

2017-03-16 don joe

你可以用烏爾代碼做一個小提琴或bootply嗎？ –

你好，我現在更新了我的問題，並添加了bootply示例。 –

看看這個更新bootply：http://www.bootply.com/bIkOZWIkBB。從#navbar移除填充頂&填充底部，並添加padding-top: 35px;和padding-bottom: 35px;到#navbar李一，如：

#navbar li a { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #484651; 
    font-size: 12px; 
    transition: all 0.4s; 
    padding-top: 35px; 
    padding-bottom: 35px; 
}

，然後添加填充頂部&底部<a>標籤與網站名稱，如：

<a class="navbar-brand" href="#" style=" 
    padding-top: 35px; 
    padding-bottom: 35px; 
">My Website</a>

來源

2017-03-17 09:28:02

謝謝，它幫助我理清了我的錯誤。 –

很高興幫助！ –

Bootstrap - 使導航欄鏈接區域匹配自定義導航欄的大小

回答

相關問題