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 - 使导航栏链接区域匹配自定义导航栏的大小

回答

相关问题