特定のサイズの特定の列を非表示にしますか？

Question

私は財団を使用しています。現在のところ、ナビゲーションバーには3つの列があり、コンテンツの右側には9つの列があります。

サイズがsmallの場合は、9個の列のみを表示したいと思います。私はすべての割合を正確に同じにしたいと思います。

最初の3つの列を単に非表示にして、すべてのサイズを同じに保つことができますか（たとえばmedium-3 medium-3 medium-3）、9列がページ幅全体を占めるようになりましたか？

私が見る別のオプションは、合計列を36に設定し、すべての計算を行い、列が同じになるようにすることですが、これはあまり理想的ではありません。

Answer 1

あなたが探しているものはvisibility classesです（このリンクはFoundation 6用です; Foundation 5を使用している場合は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> 

または中程度のものを表示（ファンデーション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>