Twitter Bootstrap - 如何根据 @media 定义的宽度更改 css 类

这是我的第一个问题，但我只想说这个网站多年来帮助了我无数次。我想我已经到了有自己的问题要问的阶段了！

抱歉，如果问题不清楚，我会尝试详细说明：我已经为我的一些元素分配了一个过渡，这样当它们悬停在上面时它们就会向上升起（即；.example:hover {margin-top: -25px} ).

你可以看到我在哪里应用了这个this http://edmundreed.co.uk/bootstrap/ page.

将鼠标悬停在“即将推出”警报框下方的元素上（即“像素完美设计”、“简洁美观的代码”和“超过 5 年的经验”）。

一切正常，但是您会注意到，当浏览器窗口的大小调整得足够小，以便元素垂直堆叠时（我相信这是@media (max-width: 767px)），悬停效果看起来不太干净。当网站以这种方式显示时（对于移动设备），我想完全消除效果。

那么问题是如何根据浏览器的宽度更改类的属性？我想在为移动设备显示时悬停时删除边距顶部（即

Thanks

您只需添加一件小事。

@media (max-width: 767px) {
  .shift:hover {
    margin-top: 0;
  }
}

另一件事是，如果在小型设备上工作，使用过渡属性的好处是什么，因为我们不希望在此视口上发生任何更改/效果。因此添加这个也可以在移动浏览器上快速渲染。

@media (max-width: 767px) {
  .shift {
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
  }
}