如何根据屏幕宽度将我的导航栏类更改为另一个导航栏类？答案

【问题标题】：How can I change my navbar class to another navbar class based on screen width?如何根据屏幕宽度将我的导航栏类更改为另一个导航栏类？
【发布时间】：2017-02-25 23:48:22
【问题描述】：

我目前将导航栏固定在页面底部，并且列表是堆叠的。像这样：

<nav class="navbar navbar-fixed-bottom">
  <ul class="nav nav-pills nav-stacked">
   <li>stuff 1</li>
   <li>stuff 2</li>
  </ul>
</nav>

如果屏幕宽度大于 320px，如何使导航栏不再固定在底部，而是固定在页面的左侧（我猜是使用 navbar-fixed-left）？

这似乎无法通过媒体查询实现，所以我想我必须使用 javascript 或 SASS？（我对 javascript 知之甚少，对 SASS 完全一无所知，所以我想我会先问这是否是我想就这个问题采取的路线）。

谢谢！

【问题讨论】：

标签： javascript html css twitter-bootstrap sass

【解决方案1】：

如何使导航栏不再固定在底部但固定在页面的左侧（我猜使用 navbar-fixed-left) 如果屏幕宽度大于 320px？

您使用媒体查询来执行此操作，但您不更改类名，而是更改该类的属性。

例如（让你开始）

.navbar-fixed {
  position:fixed;
  left:auto;
  bottom:0;
}
@media(min-width:320px) {
  // this will retain the properties declared above
  .navbar-fixed { // only add new properties of ones you want to change
    left:0;
    bottom:auto;
  }
}

【讨论】：

【解决方案2】：

使用 jQuery：

Javascript

var navResponsive = function() {
    if ($(window).width() > 320) {
        $('.navbar').addClass('navbar-fixed-left').removeClass('navbar-fixed-bottom');
    } else {
        $('.navbar').addClass('navbar-fixed-bottom').removeClass('navbar-fixed-left');
    }
};

$(window).on('resize', navResponsive());

JSFiddle

【讨论】：