需要帮助修改Bootstrap Navbar中的LI项目

Question

我正在尝试添加一些自定义CSS来修改bootstrap navbar。我有一个示例：

http://jsfiddle.net/afjl5/

我需要帮助的部分是：

<ul class="nav navbar-nav navbar-right">
    <li class="red"><a href="#">EXIT</a></li>
</ul>

我正在尝试修改＆lt; li＆gt;Navbar（红色出口按钮）中的项目，使其延伸到Navbar的底部。我尝试将高度设置为100％，但这无济于事。我还尝试过检查Chrome中的元素，并在没有成功的情况下修改了我能想到的一切。

注意，您可能需要调整JSFIDDLE窗口的大小，因为如果它太小，响应设计将移动＆lt; li＆gt;到新的行。另外，想法是，无论H1占用多少行（修改了Navbar的大小），LI总是延伸到底部。

我感谢所有帮助！

Answer 1

尝试使用此

ul.nav.navbar-nav.navbar-right {
    margin-right: auto;
    position:absolute;
    top:10px;
    bottom:0;
    right:0;
}
.red {
    background-color: red;
    color: white;
    height:100%;
}

您可以调整top和bottom以使其响应。否则通常会正常工作。

Js小提琴演示