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)

将从媒体开始。小离开中等，没有任何规则。

正确的方法应该是：

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

并且

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

多个媒体查询

1 个答案: