Bootstrap navbar last-child 间距答案

【问题标题】：Bootstrap navbar last-child spacingBootstrap navbar last-child 间距
【发布时间】：2016-05-23 11:59:13
【问题描述】：

我正在尝试删除导航栏最后一个元素的正确空间。

引导代码：

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

所以我尝试了：

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

它正在工作，但填充应用于所有元素，而不仅仅是最后一个。

网站在这里：http://mrsmith.be

【问题讨论】：

您要选择最后一个 li 元素，而不是最后一个 a 元素（这是菜单中的每个 a 元素，因为每个a是其li 父级的唯一子级。）

标签： twitter-bootstrap html-lists navbar

【解决方案1】：

您需要在 <li> 上使用 :last-child 选择器，而不是 <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>

与:nth-child() 相比，使用:last-child 通常具有更好的浏览器支持。有关特定浏览器信息，请参阅this chart。 iOS8 also has some notable issues with :nth-child()。

【讨论】：

【解决方案2】：

这可行，它是我更喜欢的替代解决方案：

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

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

希望这会有所帮助！

【讨论】：

通过网站的 CMS（如果有的话）添加或删除菜单项会发生什么？ CSS 也必须更新...