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

Question

我想知道是否有纯粹的 css 或 bootstrap 方法可以让元素上的边框在屏幕尺寸太小时消失？这是因为我有 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