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

Question

这是我在这里的第一个问题,但我想说这个网站多年来帮助了我无数次.我想我已经到了自己有问题的阶段!

对不起,如果问题不明确,我会试着详细说明:我已经指定了一些过渡到我的一些元素,所以当它们盘旋时它们会向上升起(即; .example:hover {margin-top: -25px}).

您可以在此页面上查看我在哪里应用此功能.

将鼠标悬停在"即将推出"警告框下方的元素上(即"Pixel Perfect Designs","精美干净的代码"和"超过5年的经验").

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

所以问题是如何根据浏览器的宽度更改类的属性？我想在移动设备显示时(例如<767px)移除边缘顶部,但在正常观看时保持在那里.

谢谢

Answer 1

只需要添加一小部分内容.

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

如果在小型设备上工作,还有一件事是使用转换属性有什么好处,因为我们不希望对此视口有任何更改/影响.所以添加它也可以在移动浏览器上快速渲染.

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