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

Question

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

很抱歉，如果问题不明确，我会详细说明：我已经指定了一些过渡到我的一些元素，这样当它们悬停在它们上方时（即.example:hover {margin-top: -25px}）。

您可以在this页面上查看我已将其应用到的位置。

将鼠标悬停在“即将推出”警告框下方的元素上（即“Pixel Perfect Designs”，“精美干净的代码”和“超过5年的经验”）。

一切正常，但是你会注意到当浏览器窗口的大小足够小以便元素垂直堆叠时（我相信这是@media (max-width: 767px)），悬停效果似乎不是很明显清洁。当网站以这种方式显示时（对于移动设备），我想完全删除效果。

所以问题是如何根据浏览器的宽度更改类的属性？我想在为移动设备显示时悬停边缘顶部（即;＆lt; 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;
  }
}

Answer 2

使用@media包装相应的CSS规则，如下所示：

@media (min-width: 768px) {
    .example:hover {
        margin-top: -25px;
    }
}

请注意，我使用的是min-width - 此从“电话”视图中排除了规则。

Answer 3

sytling来自docs.css，你有：

.shift:hover {
margin-top: 40px !important;
}

正如@dequis所说，@ media查询是要走的路。由于悬停效果在移动屏幕上堆叠3列时效果不佳，因此您可以删除垂直过渡并将其替换为水平过渡，并将以下内容添加到docs.css：< / p>

@media (max-width: 767px) {
.shift:hover {
margin-top: 0 !important; /* it's possible this might need some fine-tuning */
margin-right: -20px;
}

}

一旦它到位，可能需要进行一些调整，认为如果需要的话会很容易。

祝你好运！