css - Bootstrap Navbar - 菜单项周围的边框

Question

我正在尝试在 bootstrap 的导航栏中的菜单项周围应用边框，但它似乎无法按照其他地方提供的解决方案工作。

我在我的 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>

自定义.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;
}