21

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

<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%;
 }
}
4

1 回答 1

44

是的，这实际上是 twitter bootstrap 使用的方法。看看他们的网格系统的源代码。

hidden-phone, ... 类（在版本 3 中已重命名为hidden-xs , ..）只需根据当前媒体查询将“display”属性设置为“none”或“block”即可。看看他们的响应式实用程序和 mixins，如果你想要完整的细节，请查找文本“响应式可见性”。

虽然这是“less”而不是“css”，但它应该是可读的。如果您对“less”是什么感到好奇，请访问网站lesscss.org

于 2013-09-13T15:43:43.350 回答