Question

我正在尝试添加一些自定义css来修改bootstrap导航栏。我有一个例子如下：

我需要帮助的部分是：

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

我正在尝试修改＆lt; li＆gt;导航栏中的项目（红色退出按钮），以便它延伸到导航栏的底部。我已经尝试将高度设置为100％，但这没有做任何事情。我也尝试过检查chrome中的元素并修改了我能想到的所有内容但没有成功。

注意，您可能需要调整jsfiddle窗口的大小，因为如果它太小，响应式设计会移动＆lt; li＆gt;到一个新的行。此外，我们的想法是，无论H1占用多少行（这会修改导航栏的大小），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 Fiddle Demo

需要帮助修改bootstrap导航栏中的li项目

1 个答案: