Question

这是我的第一篇文章，虽然我已经从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。（如果您单击＆＃34; about＆＃34;链接并移动焦点，则很明显。

Answer 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。

甚至在Bootstrap导航栏周围设置边框？

1 个答案: