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

我正在使用 Twitter 引导程序。我有一个btn-group。我希望为768px 或以上的屏幕添加btn-groupbtn-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 像素时才可见。然后添加你想要的类。

【讨论】:

    猜你喜欢
    • 2015-10-07
    • 1970-01-01
    • 2023-01-26
    • 2014-02-21
    • 1970-01-01
    • 1970-01-01
    • 2021-11-09
    • 2021-10-23
    • 2017-08-30
    相关资源
    最近更新 更多