在 Bootstrap 导航栏周围设置边框？答案

【问题标题】：Make the border even around Bootstrap navbar?在 Bootstrap 导航栏周围设置边框？
【发布时间】：2015-06-26 18:12:35
【问题描述】：

这是我的第一篇文章，尽管我已经从 Stack Overflow 中受益了很长一段时间。

我刚刚创建了一个site 用于练习，但导航栏周围的边框出现问题。

这是我正在使用的复杂代码：

@media (min-width: 768px) {
.navbar-nav > li > a:first-child {

    border-left: 2px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li > a:last-child {

    border-left: 1px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border: 0px solid #fff;
    font-size: .8em;
}}

目标是有一个 2px 的边框。

不幸的是，这会导致一些问题 -

中间边框为 3px
第一个子左边框为 1px。（如果您单击“关于”链接并移动焦点，则这一点很明显。

【问题讨论】：

标签： css twitter-bootstrap navigation border navbar

【解决方案1】：

CSS

@media (min-width: 768px) {
.navbar-nav > li:first-child > a {

    border-left: 2px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li:last-child > a {

    border-left: 1px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border: 0px solid #fff;
    font-size: .8em;
}}

您尝试的是正确的，但您应用的元素 :first-child 和 :last-child 是错误的，您应该申请 li 而不是 a 试试上面的 CSS。

【讨论】：