Css 多媒体查询

我正在尝试使用引导的媒体查询来设置导航栏的样式。如果屏幕大小介于xs和sm之间，则应

导航对齐

。如果大于应为

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;
  }
}

令人惊讶的是，这种方法独立运行良好

但是，当合并时：

我该怎么做有什么想法吗

你做错了

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

基本上将包括从超小的屏幕到小的

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

将从中等开始。没有任何规则地将小变为中

正确的方法应该是：

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

及

---

很抱歉，它仍然无法解决问题。我已经包括了一个图像显示您的预期输出。

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