响应式设计中的列分隔符

Question

假设我有 4 个图标，我想响应式布局，如果有 space，它们是水平的，否则是垂直的：

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

响应式设计中的列分隔符

Column delimiters in responsive design

css

responsive-design

twitter-bootstrap

twitter-bootstrap-3