对于大屏幕使用`.navbar-fixed-top`,对于较小的屏幕使用`.navbar-static-top`

时间:2015-04-08 21:31:47

标签: twitter-bootstrap twitter-bootstrap-3 sass bootstrap-sass

我在我的网站上使用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,除了我想扩展一个在库中定义的类(Bootstrap),所以我没有选择转换{{的定义1}}和.navbar-static-top成为mixins或以任何方式更改其定义,因为目前该问题的所有现有答案都表明了这一点。

1 个答案:

答案 0 :(得分: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;
  }
}