爲特定尺寸隱藏某些列？

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>