Html 引导仍然显示最后一个隐藏列表项的导航分隔符

我注意到Bootstrap3.3.7导航和最后一个隐藏列表项有一个小问题，它仍然显示一个导航分隔符

列表项是否包含下拉类似乎无关紧要，隐藏类似乎只是阻止列表项显示，而

ul#主菜单li:last child

似乎被忽略

请参见下面的示例代码：

<div id="navigation">
    <div class="navbar navbar-fixed-top" id="top">
        <div class="navbar-inner">
            <div class="inner">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/" title="Home"><h1>WebApplication1</h1><span>@ViewBag.Title</span></a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-right" id="main-menu">
                            @Html.MenuLink("Home", "Home", "Index", "Home")
                            <li class="dropdown">
                                <a href="#" title="Test" class="dropdown-toggle" data-toggle="dropdown">Test <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    @Html.MenuLink("Link1", "Home", "LinkOne", "Link1")
                                    @Html.MenuLink("Link2", "Home", "LinkTwo", "Link2")
                                    @Html.MenuLink("Link3", "Home", "LinkThree", "Link3")
                                </ul>
                            </li>
                            <li class="dropdown hide" id="notificationsLink">
                                <a href="#" title="Notifications" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o" aria-hidden="true"></i> <span id="notificationsBadge" class="badge badge-primary"></span> <b class="caret"></b></a>
                                <ul class="dropdown-menu" id="notificationsList"></ul>
                            </li>
                            @*<li class="hide">
                                <a href="#">Test</a>
                            </li>*@
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ul#main-menu li:last-child {
    border-right: none;       
}

切换导航

@MenuLink（“主页”、“主页”、“索引”、“主页”）


@MenuLink（“Link1”、“Home”、“LinkOne”、“Link1”）
@MenuLink（“Link2”、“Home”、“LinkTwo”、“Link2”）
@MenuLink（“Link3”、“Home”、“LinkThree”、“Link3”）





@*

*@

ul#主菜单李：最后一个孩子{
边界权：无；
}

---

有人能帮我解决这个小问题吗？

你能提供一把小提琴来更好地理解你的问题吗。请看，我希望这能说明这个问题。如果你需要任何进一步的信息，请不要犹豫，问问我解决这个问题的唯一方法是一种非常复杂的方法，通过jQuery添加隐藏的列表项。当页面加载的隐藏列表项不是DOM的一部分时，jQuery代码确定链接是否应可见，并使用jQuery append将链接添加到#主菜单。这可防止右侧外部导航分隔器不必要地出现。