twitter-bootstrap 在手机上的引导程序中隐藏列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18790132/
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
hide column in bootstrap on mobile phone
提问by Richard Banks
I have a site with 2 columns and i want to hide one of the columns when the site is viewed on a mobile. I know you can use the hidden_phone class and set the column class to 99% or whatever it is using a screen size media query but im wondering if this is the correct way of doing it. Is there a better way or a more correct way
我有一个有 2 列的网站，当在移动设备上查看该网站时，我想隐藏其中一列。我知道您可以使用 hidden_phone 类并将列类设置为 99% 或使用屏幕大小媒体查询的任何内容，但我想知道这是否是正确的方法。有没有更好的方法或更正确的方法
<div class="container>
<div class="row">
<div class="span8">some content</div>
<div class="span4 hidden-phone">some content</div>
</div>
</div>
@media (max-width: someresolution){
.span8{
width:99.3214534%;
}
}
回答by Moeri
Yes, this is actually the approach twitter bootstrap uses. Have a look at the source code of their grid system.
是的，这实际上是 twitter bootstrap 使用的方法。看看他们的网格系统的源代码。
The hidden-phone, ... classes (these have been renamed to hidden-xs, .. in version 3) work by just setting the "display" attribute to "none" or "block" depending on the current media query. Have a look at their responsive-utilitiesand mixinsand look for the text 'responsive-visibility' if you want the full details.
hidden-phone, ... 类（在第 3 版中已重命名为hidden-xs, .. ）根据当前的媒体查询将“display”属性设置为“none”或“block”。如果您需要完整的详细信息，请查看他们的响应式实用程序和 mixin，并查找文本“响应式可见性”。
While this is 'less' and not 'css', it should be readable. If you're curious what 'less' is, visit the website at lesscss.org
虽然这是 'less' 而不是 'css'，它应该是可读的。如果您想知道“少”是什么，请访问网站lesscss.org
