如何在页面缩小时使边框消失？

Question

我想知道是否有一种纯粹的CSS或引导方式让屏幕尺寸变得过小时元素上的边框消失？这是因为我有3列有边框之间这样col|col|col并在页面变得太小，它们看起来像这样

col 
|col| 
col 

我不想对山坳中间的边界。有什么想法吗？

Answer 1

您可以在这些边框上进行媒体查询，并在边框太小时将其更改为display:none。

举例来说，如果你有这样的事情：

.vertical-border { 
    height: 200px; 
} 

您可以添加：

@media screen and (max-width: 300px) { 
    .vertical-border { 
    display: none; 
    } 
} 

同样，如果你的边界是元素本身的属性，你可以覆盖媒体查询中的边框属性。

border: 0; 

有关媒体查询的详细信息可以在这里找到：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp