我有一个有 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%;
}
}
是的,这实际上是Twitter引导程序使用的方法。看看他们的网格系统的源代码。
隐藏的电话,...类(这些类已重命名为 hidden-xs,.. 在版本 3 中)只需根据当前媒体查询将"display"属性设置为"none"或"block"即可工作。看看他们的响应式实用程序和mixin,如果你想要完整的细节,请寻找文本"响应式可见性"。
虽然这是"更少"而不是"css",但它应该是可读的。如果您想知道"更少"是什么,请访问网站 lesscss.org