大屏幕使用 .navbar-fixed-top ，小屏幕使用 .navbar-static-top [重复]

Question

我在我的网站上使用 Bootstrap，我选择使用固定在屏幕顶部的导航栏在桌面浏览器上进行导航，那里有大量可用的屏幕空间。这是通过在我的导航栏上使用 .navbar-fixed-top 类在引导程序中完成的。

虽然我更喜欢在较小的屏幕上使用静态导航栏，但它会随着页面内容的其余部分滚动，因为这样可以在此类空间非常宝贵的较小设备上节省垂直屏幕空间。

当然，我转向了使用 css 媒体查询的明显方式：

#site-header
{
  @extend .navbar, .navbar-default;

  @media (max-width: $screen-xs-max) {
    @extend .navbar-static-top;
  }

  @media (min-width: $screen-sm-min) {
    @extend .navbar-fixed-top;
  }
}

不幸的是，这给了我错误消息：

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

根据错误消息，这似乎是 SASS 中一个非常刻意的限制。除了使用 JavaScript 动态应用类之外，还有其他方法吗？

基本上我的问题类似于Extending selectors from within media queries with Sass，除了我希望扩展在库（引导程序）中定义的类，所以我没有转换.navbar-static-top 的定义的选项和.navbar-fixed-top 进入 mixins 或以任何方式更改它们的定义，正如目前对该问题的所有现有答案所建议的那样。

Answer 1

您可以在媒体查询中编写类并扩展它们。像这样的

#site-header {
  @extend .navbar, .navbar-default;
}

@media (max-width: 767px) {
  .navbar-static-top {
    position: static;
  }

  #site-header {
    @extend .navbar-static-top;
  }
}

@media (min-width: 768px) {
  .navbar-fixed-to-top {
    position: fixed;
    top: 0;
    right: 0;
  }

  #site-header {
    @extend .navbar-fixed-to-top;
  }
}