Сделать границу даже вокруг Bootstrap navbar?

Question

Это мое первое сообщение, хотя я уже давно получаю выгоду от переполнения стека.

Я только что создал 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. (Это очевидно, если вы нажмете «о» ссылке и фокус перемещается.

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.