多种媒体查询

Question

我正在尝试使用引导程序使用媒体查询来设置导航栏样式。 如果屏幕在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;
  }
}

令人惊讶的是，这独立运作良好。

导航对齐图像

但是，结合使用时：

结果

对我应该怎么做有什么想法？

Answer 1

你做错了

 @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)