Bootstrap 导航栏上子间距

Question

我正在尝试删除导航栏最后一个元素的右侧 space。

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;
}

您遇到的问题是，您尝试 select 最后一个元素，它应该是最后一个 li 元素。

希望对您有所帮助！

Answer 2

您需要在 <li> 而不是 <a> 上使用 :last-child 选择器。这是一个快速工作示例，我添加了红色背景，以便您可以轻松查看哪些元素受到影响：

.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>

与 :nth-child() 相比，使用 :last-child 通常具有更好的浏览器支持。参见 this chart for specific browser information. iOS8 also has some notable issues with :nth-child()。

Bootstrap 导航栏上子间距

Bootstrap navbar last-child spacing

html-lists

navbar

twitter-bootstrap