Css 从响应框架内的行**上的最后一个子项（子项）**中删除边框？

换句话说，不仅是父div中的最后一个子项，而且是一行中根据屏幕大小而变化的最后一项。我在一行中有4个元素（div），除了最后一个元素（使用：last child），每个元素上都有一个右边框。但是，在小屏幕上，我的4个div行变为2个div行，因此在本例中，我需要删除第二个子项和最后一个子项上的右边框，即两行中每一行的最后一个div

这类似于这个问题（），答案是使用：last child，但我的案例增加了一个复杂性，即仅在某个屏幕大小以下删除最后一个孩子和第二个孩子的边界

---

有没有一种方法可以在CSS中实现这一点，而不需要编写一个媒体查询，只针对这个非常小、非常具体的情况（这似乎是一种糟糕的形式）？也许我只是走错路了……任何想法都将不胜感激。我四处寻找解决方案，但找不到此特定场景。

您应该可以通过几个媒体查询来实现这一点

在平板电脑的媒体查询中，包括您当前的边框样式（取自@DarrenS'bootply）：

在智能手机的媒体查询中，使用

：nth child（odd）

获得您想要的效果：

@media screen and (max-width: 767px) {
    .col-xs-6:nth-child(odd) {
        border-right: 1px solid black;
    }
}

---

我做了一个演示，它正确地演示了问题吗？谢谢你制作这个@DarrenS。我认为这说明了问题所在。唯一的区别是我添加/删除边框的方式略有不同（我没有创建.borderRight类并将其应用于前3个div，而是为所有div指定了一个右边框，并使用.myClassName:last child{border right:none；}将其从上一个div中删除.因此，在您创建的演示中，我正在寻找一种方法以移动屏幕大小删除第二个div上的右边框。但是在您的情况下（如果我理解正确，我没有太多使用引导），最好使用

.col-sm-3:nth child（4）

而不是

。col-sm-3:last child

。谢谢@Ryan Mitchell，但我想知道是否有一种方法可以不用再写另一个媒体查询就可以做到这一点。这是我发现的最接近的一件事——这家伙以多行网格中的最后一行为目标。我只是想以每行中的最后一个div为目标：这是我尝试的唯一原因在没有媒体查询的情况下执行此操作是b/c Bootstrap的核心CSS已经有许多媒体查询。在我的自定义样式中使用更多的媒体查询来修复这样的小问题似乎是一种不好的形式。我可能错了。我道歉：我太专注于您对问题的描述，以至于完全没有听到您关于避免媒体查询的内容是的！如果没有它们，我不知道有什么办法可以做到。@Jody这不是你问题的答案，但我确实认为媒体查询将是你最好的选择。在我们建立的引导网站中，我们总是在CSS中添加一些媒体查询，以获得我们想要的外观。感谢@DarrenS的输入。这至少让kno感到欣慰其他人都是这样做的。

@media screen and (max-width: 767px) {
    .col-xs-6:nth-child(odd) {
        border-right: 1px solid black;
    }
}