Question

假设我有4个图标，我想要响应地布局，以便在有空格和垂直的情况下它们是水平的：

Desktop:
□ | □ | □ | □

Tablet:
□ | □
□ | □

Mobile:
□
□
□
□

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

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

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

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

响应式设计中的列分隔符

1 个答案: