Question

我有自定义bootstrap导航栏。所以我在导航栏的底部和顶部添加了20px填充，我也设置了导航栏链接以在悬停时更改背景颜色。现在我面临着我之前添加的填充问题，当导航栏链接悬停并且悬停时更改的背景颜色与导航栏的大小不匹配时，它周围有空间。 screenshot我想让导航栏的悬停区域与我的自定义导航栏相同。如果有人可以帮我这个。这是Bootply fiddle 感谢

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;
}

Answer 1

查看此更新的bootply：http://www.bootply.com/bIkOZWIkBB。删除padding-top＆amp;来自#navbar的padding-bottom并将padding-top: 35px;和padding-bottom: 35px;添加到#navbar li a，例如：

#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;
}

然后添加padding top＆amp;标有网站名称的<a>标记的底部，例如：

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

Bootstrap - 使导航栏链接区域与自定义导航栏的大小匹配

1 个答案: