twitter-bootstrap 如何基于 Bootstrap 媒体查询断点隐藏/删除类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27118382/
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
How to hide/remove a class based on Bootstrap media query breakpoints?
提问by Jerielle
Is it possible to show/hide a class based on the screen size of the device? I am using bootstrap default media query. I have this default setup:
是否可以根据设备的屏幕尺寸显示/隐藏类？我正在使用引导程序默认媒体查询。我有这个默认设置：
/* Bootstrap Media Query Breakpoints
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {...}
/* Extra Small Devices, Phones equivalent to class xs */
@media only screen and (min-width : 480px) {...}
/* Small Devices, Tablets equivalent to class sm */
@media only screen and (min-width : 768px) {...}
/* Medium Devices, Desktops equivalent to class md */
@media only screen and (min-width : 992px) {...}
/* Large Devices, Wide Screens equivalent to class lg */
@media only screen and (min-width : 1200px) {...}
I have a div that like this:
我有一个像这样的 div：
<div class="col-xs-12 ol-sm-6 col-md-6">
<div class="pull-right">
<ul class="header_links">
<li>
<a href="#">Member</a>
</li>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Member Registration</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Cart: 0</a>
</li>
</ul>
<ul class="social_media_links">
<li>
<a href="#">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-tumblr-square"></i>
</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
What I want is if the media query is in the col-xs-#the class pull-rightwill be hidden or removed. Is it possible in bootstrap?
我想要的是，如果媒体查询在col-xs-# 中，类pull-right将被隐藏或删除。有可能在引导程序中吗？
回答by Schmalzy
Bootstrap has built-in utility classes for hiding\showing content based on the viewport.
Bootstrap 具有用于基于视口隐藏/显示内容的内置实用程序类。
http://getbootstrap.com/css/#responsive-utilities
http://getbootstrap.com/css/#responsive-utilities
.visible-xs-*and .hidden-xs(* = block, inline-block or inline)
.visible-xs-*和.hidden-xs(* = 块、内联块或内联)
EDIT
编辑
You won't be able to override .pull-rightbecause it uses !important, and it only applies one rule (float: right;), so its pretty easy to recreate as a custom class.
您将无法覆盖，.pull-right因为它使用!important，并且它只应用一个规则 ( float: right;)，因此很容易将其重新创建为自定义类。
.pull-right-custom {
float: right;
}
@media only screen and (max-width : 480px) {
.pull-right-custom {
float: none;
}
}
Edit #2
编辑 #2
If you want to keep with the mobile-first nature of bootstrap, it would look like this.. the smwould indicate it pulls right on smor larger viewports (for semantics).
如果你想保持引导程序的移动优先性质，它看起来像这样......sm这表明它可以直接拉动sm或更大的视口（用于语义）。
.pull-right-sm {
float: none;
}
@media only screen and (min-width : 480px) {
.pull-right-sm {
float: right;
}
}
回答by Luis Carlos
Hide or remove is not possible, but you can change the way will be rendered
隐藏或删除是不可能的，但您可以更改将呈现的方式
@media only screen and (max-width : 480px) { .pull-right {float:none;}}
@media only screen and (max-width : 480px) { .pull-right {float:none;}}
So, in this way, in all media screen less then 480px, this class will not be rendered with float:right.
因此，这样，在所有小于 480px 的媒体屏幕中，此类将不会使用 float:right 进行渲染。
回答by Dan K.K.
I think the right way to do this is to use Bootstrap's responsive utilities.
我认为正确的方法是使用 Bootstrap 的响应式实用程序。
Take a look at the source code of visibility mixins definitionas a reference, you can use them to extend your own classes, like:
看一下可见性mixins定义的源代码作为参考，你可以使用它们来扩展你自己的类，比如：
/* make sure that you've imported Bootstrap */
@import "bootstrap/less/bootstrap.less";
.pull-right-custom {
.pull-right; /* to make element behave exactly like .pull-right; */
.visible-xs-block; /* to make element visible only on extra-small screens, etc... */
}
Or if you're using precompiled or some CDN-shared version of Bootstrap, just add this classes directly into your html like this:
或者，如果您使用的是预编译或某些 CDN 共享版本的 Bootstrap，只需将这些类直接添加到您的 html 中，如下所示：
<div class="pull-right visible-xs-block">
...
</div>
