Bootstrap Navbar - 菜单项周围的边框答案

【问题标题】：Bootstrap Navbar - Border around menu itemsBootstrap Navbar - 菜单项周围的边框
【发布时间】：2019-07-13 00:53:44
【问题描述】：

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

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

【问题讨论】：

你是在 bootstrap.css 之后加载你的 custom.css 吗？样式是否被覆盖或根本不适用？
我在 bootstrap.css 之后加载 custom.css。我可以看到 custom.css 更改正在应用于其他元素，因此 css 包含顺序不是问题。
分享您的菜单的 html 和影响它的自定义 css。
添加了 html 和 css。使用此代码，我得到边框，但当您将鼠标悬停在它上面时菜单会跳转。
Tx，我搞定了。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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;
}

【讨论】：