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

【问题标题】：Apply class depending on media query screen size根据媒体查询屏幕大小应用类
【发布时间】：2014-04-28 03:10:43
【问题描述】：

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

【问题讨论】：

最简单？这值得商榷，但对我来说，最简单的方法是将两个按钮组都放在标记中，然后根据会议媒体查询隐藏和显示它们。
按钮里面有ids，所以我不想复制它们。
你可以使用基于window.width的JavaScript。
没有办法在 CSS 中应用一个类的所有属性？
您要将 btn-group 添加到哪个元素？或者您是否需要btn-group 元素才能在768px 或以上的屏幕上拥有btn-group-justified 类？？？？

标签： css twitter-bootstrap htmlbutton

【解决方案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);
});

【讨论】：

注意：带有resize函数的倒数第二行在changeWidth后面不能有括号。否则它将只在页面上运行一次，而不是每次调整窗口大小时。
没错，@runfaj。固定！

【解决方案2】：

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

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

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

【讨论】：