根据媒体查询屏幕尺寸应用类

Question

我正在使用Twitter Bootstrap。我有一个btn-group。我想要在屏幕宽度等于或超过768px时添加btn-group和btn-group-justified类，并在屏幕宽度小于或等于767px时应用btn-group-vertical类。我该怎么做？

- GiantDuck

---

最简单的？这是有争议的，但对我来说，最简单的方法是在标记中拥有两个按钮组，并根据满足媒体查询的条件来隐藏和显示它们。 - nickcoxdotme

按钮内部有id，所以我不想复制它们。 - GiantDuck

你可以使用基于 window.width 的 JavaScript。 - nickcoxdotme

CSS中没有办法应用类的所有属性吗？ - GiantDuck

你要将 btn-group 添加到哪个元素中？或者你需要让 btn-group 元素在屏幕宽度达到 768px 或以上时具有 btn-group-justified 类？ - Seth

Answer 1

您可以使用Bootstrap的实用类（.visible-xs）。

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

你需要创建内容，只有当前屏幕宽度小于768像素时才可见。然后添加所需类别。

- JoJo

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);
});

- nickcoxdotme

---

注意：倒数第二行的resize函数在changeWidth后不应该有括号。否则它只会在页面上运行一次，而不是每次窗口大小调整时都运行。 - runfaj