css - 响应式设计中的列分隔符

Question

假设我有 4 个图标，我想进行响应式布局，以便在有空间时它们是水平的，否则是垂直的:

Desktop:
□ | □ | □ | □

Tablet:
□ | □
□ | □

Mobile:
□
□
□
□

在 Bootstrap 中，这可以通过网格系统轻松完成，其中每个图标都将放置在一个列中:

<div class="col-md-3 col-sm-6 col-xs-12 icon">

但我的问题是关于您在图中看到的那些分隔符。我想使用简单的边框属性在图标之间绘制垂直线，如下所示:

.icon {
    border-left: 1px solid #333;
}
.icons:first-child {
    border-left: none;
}

这将删除第一个图标的左边框，桌面上的一切看起来都很棒，但我也需要对其他布局做类似的事情，即删除平板电脑布局中第三个图标的边框并删除移动布局中的所有边框.一次性解决方案是使用媒体查询，但有没有一种方法可以针对行中任意数量的元素和各种布局智能地执行此操作？

Answer 1

您可以使用@media 查询:

/* Default all border except first one (left). */
.icon {
    border-left: 1px solid #333;
}
.icon:first-child {
    border-left: none;
}

/* Tablet (check the value with bootstrap), only even child have left border. */
@media (max-width: 992px) {

    .icon:nth-child(odd) {
        border-left: none ;
    }

}

/* On mobile, no border. */
@media (max-width: 768px) {

    .icon {
        border-left: none ;
    }

}  

我选择的值(768 和 992)是 Bootstrap 用来设置 col-xx-x 宽度的值。不幸的是，这不适用于旧浏览器(需要 first-child 和 nth-child)。