根据媒体查询屏幕大小应用类

Question

我正在使用Twitter Bootstrap。我有btn-group。我希望为btn-group或以上的屏幕添加btn-group-justified和768px类，并为btn-group-vertical或以下的屏幕应用767px类。最简单的方法是什么？

Answer 1

您可以使用bootstrap的实用程序类。 （。可见-XS）

http://getbootstrap.com/css/#responsive-utilities

您基本上创建的内容仅在当前屏幕低于768px时才可见。然后添加你想要的课程。

Answer 2

这是一个jQuery实现。如果您无法将ID更改为按钮上的类，这可能是我能想到的最佳方式。

$(document).ready(function(){
  var changeWidth = function(){
    if ( $(window).width() < 768 ){
    $('.btn-group-justified').removeClass('btn-group-justified').addClass('btn-group-vertical');
    } else {
      $('.btn-group-vertical').removeClass('btn-group-vertical').addClass('btn-group-justified');
    }
  };
  $(window).resize(changeWidth);
});