Bootstrap navbar расстояние между дочерними элементами

Question

Я пытаюсь удалить нужное пространство для последнего элемента моего навигатора.

код Bootstrap:

.nav > li > a { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
} 

Так что я пробовал:

.nav > li > a:last-child { 
    padding-right: 0 !important; 
} 

Это работает, но заполнение применяется ко всем элементам, а не только последний.

Сайт находится здесь: http://mrsmith.be

Answer 1

Это работает, его альтернативное решение, которое я предпочитаю:

ul.nav li:nth-child(5) a { 
padding-right: 0 !important; 
} 

Проблема у вас есть, что вы пытаетесь выбрать последний элемент, его должен быть последним элементом li.

Надеюсь, это поможет!

Answer 2

Вам необходимо использовать селектор последнего ребенка на <li> вместо <a>. Вот краткий рабочий пример, я добавил красный фон, так что вы можете легко увидеть, какие элементы осуществляются:

.nav > li:last-child > a { 
 
    background: red; 
 
    padding-right: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<ul class="nav"> 
 
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
</ul>

Использование :last-child обычно имеет лучшую поддержку браузера по сравнению с :nth-child(). См. this chart для получения конкретной информации о браузере. iOS8 also has some notable issues with :nth-child().