为特定尺寸隐藏某些列？

Question

我正在使用基金会。我的导航栏目前占用3列，我的内容占据最右边的9列。

对于大小small，我只想显示这9列。我希望所有比例保持完全一样。

是否有任何方法可以简单地'隐藏'前3列，以便我可以保持所有尺寸相同（例如medium-3 medium-3 medium-3），但9列现在占用整页宽度？

我看到的另一个选择是将总列设置为36，并进行所有数学计算，以使列最终保持相同，但这似乎不太理想。

Answer 1

您要找的是visibility classes（如果您使用Foundation 5，此链接适用于Foundation 6; click here）。阅读，因为这个页面有许多有用的可见性选项。

可以达到的效果要通过躲藏了小唯（基金会5 & 6）：

<div class="row"> 
    <div class="medium-3 columns hide-for-small-only"> 
    <!-- navigation bar --> 
    </div> 
    <div class="medium-9 columns"> 
    <!-- main content --> 
    </div> 
</div> 

或显示为大中型（基金6）：

<div class="row"> 
    <div class="medium-3 columns show-for-medium"> 
    <!-- navigation bar --> 
    </div> 
    <div class="medium-9 columns"> 
    <!-- main content --> 
    </div> 
</div> 

或由显示为中等和更大（Foundation 5）：

<div class="row"> 
    <div class="medium-3 columns show-for-medium-up"> 
    <!-- navigation bar --> 
    </div> 
    <div class="medium-9 columns"> 
    <!-- main content --> 
    </div> 
</div>