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

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