隐藏手机上引导中的列



我有一个有 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

最新更新