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

Question

我正在使用 Twitter 引导程序。我有一个btn-group. 我想为屏幕或以上添加btn-group和类，以及为屏幕或以下应用的类。最简单的方法是什么？btn-group-justified768pxbtn-group-vertical767px

Answer 1

这是一个 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);
});

Answer 2

您可以使用引导程序的实用程序类。(.visible-xs)

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

您基本上创建的内容只有在当前屏幕低于 768 像素时才可见。然后添加你想要的类。