Question

我遇到一个问题，我的引导程序导航在下拉菜单中引用了辅助ul时border-bottom: **attribute**存在问题。

我希望在导航的直接可见部分（主页，页面，快速链接等）上有border-bottom: medium black solid或类似内容，但不在下拉菜单中。我尝试过明显的自定义css，包括：not（）选择器和其他伪类。这些都没有奏效。

基本概要：

<ul class="nav navbar-nav navbar-right">
    <li class="active">
        <a href="#">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span><span class="sr-only">(current)</span></a>
    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Pages<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Primary</a>
                            </li>
                            <li><a href="#">Secondary</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Link</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
                        </ul>

https://jsfiddle.net/meh/r6byr9td/ 要查看展开的导航，请将JavaScript部分向左拖动，或以全屏模式查看。

Answer 1

您需要定位确切的元素。 ul.nav > li

ul.nav > li {
  border-bottom: medium black solid;
}

Boostrap导航（辅助ul）不响应自定义CSS边界

1 个答案: