覆盖媒体查询 - 最小和最大宽度

时间:2017-03-13 02:59:59

标签: css media-queries

我在第一个CSS文件中有这个代码:

/* min-width */
@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

/* max-width */
@media (max-width: 767px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}

我在第一个文件后链接的CSS文件中有这段代码:

/* min-width */ 
@media (min-width: 992px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

/* max-width */
@media (max-width: 991px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}

如您所见,这两个文件之间的唯一区别是最小宽度和最大宽度值。

我需要第二个文件中的代码来覆盖第一个文件。它需要好像第一个文件中的代码不存在一样。我无法访问第一个文件,它是从CDN中提取的。请参阅此问题:Modifying Bootstrap breakpoints after loading from a CDN。我通过将LESS变量@grid-float-breakpoint@screen-sm-min更改为@screen-md-min来自定义引导程序,以防止导航栏溢出到两行。我对自定义和原始编译版本进行了区分,唯一的区别是媒体查询的min-widthmax-width的值。两个版本中媒体查询的实际内容保持不变。

0 个答案:

没有答案