多媒体查询

Question

我正在尝试使用bootstrap使用媒体查询来设置导航栏的样式。如果屏幕大小介于xs和sm之间，则应为nav-justified。如果它大于应该的值，则为navbar-nav。

我做了以下工作：

@media (min-width: $screen-md-min) {
  .nav {
    @extend .navbar-nav;
  }
}

@media (min-width: $screen-xs-min) and (max-width: $screen-sm-max){
  .nav {
    @extend .nav-justified;
  }
}

令人惊讶的是，这项功能独立运行良好。

Nav Justified Image

然而，当组合在一起时：

Result

我该怎么做，有什么想法吗？

Answer 1

你做错了。

 @media (min-width: $screen-xs-min) and (max-width: $screen-sm-max)

主要包括自以来的额外小屏幕到小。

 @media (min-width: $screen-md-min) 

将从medium开始。在没有任何规则的情况下，将small留给medium。

正确的方法应该是：

 @media (min-width: $screen-xs-min) and (max-width: $screen-sm-max)

和

 @media (min-width: $screen-sm-max)