javascript - 当我获得特定的移动分辨率时如何删除一个 css 类并添加另一个

Question

我正在使用 boostrap 网格并且工作完美 我刚得​​到 col-xs-6 的问题，当我获得 375px 的分辨率时，col-xs-6 按标准带有 50%，我我知道我可以创建一个媒体查询并将其更改为 100%，并且会解决我的问题。

我只是不想做那种 hack :)，有什么方法可以删除类 col-xs-6 并在获得 375px 时添加 col-xs-12？

我知道当然可以为 col-xs-12 更改它，但是当我得到 667px 时这会更改我的 div，因为 xs 用于超小分辨率。

在 jquery 中还是在 bootstrap 中更好？

我的类(class):

<div class="col-md-4 col-sm-5 col-xs-6 no-padding sidebar-container"> </div>

之后应该是什么样子:

<div class="col-md-4 col-sm-5 col-xs-12 no-padding sidebar-container"> </div>

Answer 1

首先，使用媒体查询并不是一种 hack，它是一种根据不同屏幕更改网站布局的方法。

但可能是因为某些原因，如果您不想使用它或只想更改类，那么您可以通过简单的 jquery 调整大小功能来完成。

var winWidth = $(window).width();
function sidebarWidth(){
  if(winWidth>375px){
    $('.sidebar-container').removeClass('col-xs-12');
    $('.sidebar-container').addClass('col-xs-6');
  } else {
    $('.sidebar-container').removeClass('col-xs-6');
    $('.sidebar-container').addClass('col-xs-12');
  };
};

sidebarWidth();

$(document).resize(function(){
  sidebarWidth();
});

Above code will run on window load and will detect the screen and add the needfull class. But i am also using the same function in resize function because this will work if you resize the window after load.