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;
}
看看这个更新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>
谢谢,它帮助我理清了我的错误。 –
很高兴帮助! –
你可以用乌尔代码做一个小提琴或bootply吗? –
你好,我现在更新了我的问题,并添加了bootply示例。 –