在响应式框架内删除最后一个孩子（孩子）**的边界**

Question

换句话说，不仅是父div中的最后一个子项，而且行中的最后一项根据屏幕大小而变化。我有一个行中有4个元素（div），除了最后一个（使用：last-child）之外，每个元素都有一个border-right。但是，在一个小屏幕上，我的4行div变为2行2个div，所以在这种情况下我需要删除第二个子节点和最后一个子节点上的右边界，即两行中每一行的最后一个div。

它类似于这个问题（Remove border from last child css），它使用了：last-child来回答，但是我的情况更加复杂的是从最后一个孩子和第二个孩子身上移除边界一定的屏幕尺寸。

有没有办法用CSS做这个而不用编写媒体查询只是为了针对这个非常小的，非常具体的情况（这看起来像是糟糕的形式）？也许我只是接近它错了......任何想法都会受到高度赞赏。我已经四处寻找解决方案，但无法找到这种特定情况。

Answer 1

你应该能够通过几个媒体查询来做到这一点。

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

@media screen and (min-width: 768px) {
    .col-sm-3 {
        border-right: 1px solid black;
    }
    .col-sm-3:last-child {
        border-right: 0px;
    }
}

在智能手机的媒体查询中，使用:nth-child(odd)获得所需效果：

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