多种媒体查询

【问题标题】：Multiple media queries多种媒体查询
【发布时间】：2015-12-12 12:29:53
【问题描述】：

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

对我应该如何做有什么想法吗？

【问题讨论】：

标签： css twitter-bootstrap sass

【解决方案1】：

你做错了。

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

基本上将包括自超小屏幕到小。

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

将从中等开始。 small 到 medium 没有任何规则。

正确的方法应该是：

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

还有

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

【讨论】：

很抱歉仍然没有解决问题。我添加了一张图片来向您展示预期的输出。