响应式设计中的列分隔符

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）。