Bootstrap Navbar-菜单项周围的边框

Question

我正在尝试在引导程序中导航栏中的菜单项周围应用边框，但是按照其他地方提供的解决方案，它似乎不起作用。

我已经在我的custom.css中关注了，这是行不通的。

.navbar-default { border-color: #662D91; }

我已经尝试通过以下代码来实现此目的，但是它存在菜单跳转问题

ul.nav a:hover {
    color: #662D91;
    background-color: #ffffff;
    border: 2px solid #662D91;
}

.navbar-nav li.active > a {
    background-color: #ffffff;
    border: 2px solid #662D91;
}

我们如何以最简单的方式在菜单项周围添加边框？

下面是html和自定义CSS，它为我提供边框，但是将鼠标悬停在其上时菜单会跳转。

HTML

<ul id="w1" class="navbar-nav navbar-right nav">
    <li><a href="/yii/web/site/index">Home</a></li>
    <li class="active"><a href="/yii/web/site/about">About</a></li>
    <li><a href="/pdd_yii/web/site/contact">Contact</a></li>
    <li><a href="/pdd_yii/web/site/login">Login</a></li>
</ul>

custom.css

a {
    color: #662D91;
    text-decoration: none;
}

ul.nav a:hover {
    color: #662D91;
    background-color: #ffffff;
    border: 2px solid #662D91;
}

.navbar-nav li.active > a {
    background-color: #ffffff;
    border: 2px solid #662D91;
}

Answer 1

这会将边框应用于列表项。

.navbar-nav li {
background-color: #ffffff;
border: 2px solid #662D91;
}

这将反转悬停和活动状态的颜色。

ul.nav a:hover,.navbar-nav li.active > a{
color: #fff;
background-color: #662D91;
border: 2px solid #fff;
}