样式Bootstrap导航栏元素

Question

我正在尝试设置bootstrap navbar的某些元素。但是，我无法弄清楚如何解决一些"graphical bugs"。

首先，我的列表元素不会根据navbar增加高度。当我将鼠标悬停在我的元素上时，它看起来像这样：

我想要实现的是，悬停（因此整个元素）占据导航栏高度的100％。

此外，我希望在选择列表元素时删除背景颜色（=获取类＆＃34;活动＆＃34;）。

这就是目前的情况：

然而，将此background-color设置为transparent会很高兴。

您可以在 jsfiddle 上找到我当前设置的简化示例： demo

我已经尝试过多件事，但没有给出希望的结果。我想提供一些尝试，但由于我直接在浏览器控制台中测试了所有内容，因此我无法弄清楚到目前为止我所尝试过的内容。

也许你有个好主意来解决我的两个任务？

Answer 1

  

我想要实现的是，悬停（因此整个   element）占用导航栏的100％高度。

.navbar-brand {
    padding-bottom: 0;
}

  

另外我想在列表元素时删除背景颜色   得到选择（=获得课程＆＃34;活跃＆＃34;）。

.nav > li > a:focus
{
  background: none;
}

  

然而，将此背景颜色设置为透明会很好。

.nav > li > a:focus
{
   background-color: transparent;
}

Answer 2

您应该为导航栏设置height属性。

.navbar-custom {
    background-color:#27586b;
    color:#ffffff;
    border-radius:0;
    height:50px
}

看http://jsfiddle.net/DTcHh/4861/

因此，如果您的身高必须超过50px，则应将其设置为.navbar-custom和.navbar-custom .navbar-nav，并为子项设置height = 100％并使用填充进行垂直对齐。

.navbar-custom {
    background-color:#27586b;
    color:#ffffff;
    border-radius:0;
    height:60px
}
.navbar-custom .navbar-nav {
    height:60px;
}
.navbar-custom .navbar-nav > li {
    height:100%;
}
.navbar-custom .navbar-nav > li > a {
    padding-top:20px;
    color:#fff;
    height:100%;    
}

http://jsfiddle.net/DTcHh/4862/