我在第一个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-width
和max-width
的值。两个版本中媒体查询的实际内容保持不变。