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

Question

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

抱歉，如果问题不清楚，我会尝试详细说明:我已经为我的一些元素分配了过渡，因此当它们悬停在上方时，它们会向上上升(即 .example:hover {margin-top: -25px} )。

你可以在 this 上看到我在哪里应用了它。页。

将鼠标悬停在“即将推出”警报框下方的元素上(即“Pixel Perfect Designs”、“Beautifully Clean Code”和“Over 5 years Experience”)。

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

所以问题是如何根据浏览器的宽度更改类的属性？我想在为移动设备显示时(即< 767px)悬停时删除边距顶部，但在正常查看时将其保留在那里。

谢谢

Answer 1

你只需要添加一个小东西。

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

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

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