twitter-bootstrap Twitter Bootstrap - 如何根据@media 定义的宽度更改 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15859566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - How to change css class based on @media defined widths
提问by ESR
This is my first question here, but I would just like to say this website has helped me on countless times over my years. I guess I've got to the stage where I have my own questions to ask!
这是我在这里的第一个问题，但我想说这个网站多年来帮助了我无数次。我想我已经到了有我自己的问题要问的阶段！
Sorry if the question isn't clear, I'll try to elaborate: I have assigned a transition to some of my elements, so that when they are hovered over they rise upwards (ie; .example:hover {margin-top: -25px}).
对不起，如果问题不清楚，我会尝试详细说明：我已经为我的一些元素分配了一个过渡，这样当它们悬停在上面时它们会上升（即; .example:hover {margin-top: -25px}）。
You can see where I have applied this on thispage.
Hover over the elements underneath the "Coming Soon" alert box (ie; "Pixel Perfect Designs", "Beautifully Clean Code" & "Over 5 years Experience").
将鼠标悬停在“即将推出”警告框下方的元素上（即；“像素完美设计”、“漂亮干净的代码”和“超过 5 年的经验”）。
All works fine, however you'll notice that when the browser window is re-sized small enough so the elements are stacked vertically (I believe this is @media (max-width: 767px)), the hover effect doesn't seem quite at clean. I would like to remove the effect altogether when the website is displayed this way (for mobile devices).
一切正常，但是您会注意到，当浏览器窗口的大小重新调整到足够小以便元素垂直堆叠时（我相信这是@media (max-width: 767px)），悬停效果似乎不太干净。当网站以这种方式显示时（对于移动设备），我想完全删除效果。
So the question is how do I change a class's properties based on the width of the browser? I would like to remove the margin-top when hovered when displayed for a mobile device (ie; < 767px) but keep it there when viewed normally.
所以问题是如何根据浏览器的宽度更改类的属性？我想在为移动设备（即 < 767px）显示时悬停时删除边距顶部，但在正常查看时将其保留在那里。
Thanks
谢谢
回答by Akshaya Raghuvanshi
Only a small thing you have to add.
您只需添加一件小事。
@media (max-width: 767px) {
.shift:hover {
margin-top: 0;
}
}
One more thing if working on small devices what is the benefit to use transition properties because we don't want any change/effect on this viewport. So add this also for rendering fast on mobile browsers.
还有一件事，如果在小型设备上工作，使用过渡属性有什么好处，因为我们不希望对这个视口进行任何更改/影响。所以添加这个也是为了在移动浏览器上快速渲染。
@media (max-width: 767px) {
.shift {
transition:none;
-webkit-transition:none;
-moz-transition:none;
}
}
回答by dequis
Just wrap the corresponding CSS rule with @medialike this:
只需@media像这样包装相应的 CSS 规则：
@media (min-width: 768px) {
.example:hover {
margin-top: -25px;
}
}
Note that I'm using min-width - this excludesthe rule from "phone" view.
请注意，我使用的是 min-width - 这从“电话”视图中排除了规则。
回答by David Taiaroa
The sytling is coming from docs.css where you have:
sytling 来自 docs.css，你有：
.shift:hover {
margin-top: 40px !important;
}
As @dequis noted, @media queries are the way to go. Since the hover effect doesn't work so well when the 3 columns are stacked on a mobile screen, one possiblity is you could remove the vertical transition and replace it with a horizontal transition, with something like the following added to docs.css:
正如@dequis 所指出的，@media 查询是要走的路。由于当 3 列堆叠在移动屏幕上时悬停效果不能很好地工作，一种可能性是您可以删除垂直过渡并将其替换为水平过渡，并在 docs.css 中添加类似以下内容：
@media (max-width: 767px) {
.shift:hover {
margin-top: 0 !important; /* it's possible this might need some fine-tuning */
margin-right: -20px;
}
}
It's possible this might need some tweaking once it's in place, thought that will be easy if it's needed.
一旦到位，这可能需要一些调整，认为如果需要的话会很容易。
Good luck!
祝你好运！
