0

所以我想根据媒体查询动态添加和删除一个css类，Enquire.js但我需要使用这些函数的帮助。

这是我想要的伪形式：

if (screens max-width > 480px){

#thumb.removeClass('col-xs-12').addClass('col-xs-6');

}

这是thumb开始的元素：

<div id ="thumb" class="col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="images/thumbnails/golden.jpg" class="img-rounded img-responsive" alt="...">
    </a>
  </div>

假设我已包含所有必要的文件，我如何使用 Enquire.js 执行此操作。

4

1 回答 1

0

这里有一个关于使用 enquire.js 的很棒的教程。

话虽如此，我猜你真正的问题是你感到沮丧（就像其他许多人一样），因为 Bootstrap 在 0 到 767px 之间缺少另一个断点。

我可以和你分享我的一个超级秘密技巧吗？不要试图用查询来破解东西，只需标记您的页面，以便 xs cols 是您希望网格在 481px 和 768px 之间工作的方式。然后，只需添加此媒体查询：

@media (max-width:480px){ /* technically you can set this to any value you prefer that is below 767 */
    [class^="col-xs-"]{
        float:none;
        width:auto;
    }   
}

这样做基本上是为网格添加了另一个断点。显然，它不会改变响应式助手类（可见/隐藏）之类的东西，但如果你真的需要它，你可以为那些添加你自己的类。

因此，例如，您的标记将如下所示：

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="images/thumbnails/golden.jpg" class="img-rounded img-responsive" alt="...">
    </a>
</div>

有了这个媒体查询，col-xs-6 的行为就像 col-xs-12 低于 481px。

于 2014-07-06T14:27:04.413 回答