Foundation6：ブレークポイントの展開された行

Question

以下のような異なるブレークポイントの行の展開方法を変更したいと思います。基本的には、中程度以下に広げて、大きなブレークポイントを上回らないようにしてください。

<div class="small-expanded large-unexpanded row"> 

    <div class="small-12 columns"></div> 

</div> 

このクラスは利用できませんが、どうすれば実現できますか？

Answer 1

なぜこのようにしたいのかわかりませんが、行が最大幅に達するまで行が自動的に利用可能な幅に拡大され、その幅に留まります（デフォルトの最大幅は1200pxです。カスタマイザやSASS設定で）、あなたが言及しているクラスを作成することができます。

コード：（あなたは、標準のブレークポイントを使用していると仮定）

/* small and up */ 
.row.small-expanded { max-width: none } 
.row.small-unexpanded { max-width: 75em } 

@media screen and (min-width: 40em) { /* medium and up */ 
    .row.medium-expanded { max-width: none } 
    .row.medium-unexpanded { max-width: 75em } 
} 
@media screen and (min-width: 40em) { /* large and up */ 
    .row.large-expanded { max-width: none } 
    .row.large-unexpanded { max-width: 75em } 
} 

このコードは携帯-最初ですので、あなたは<div class="small-expanded large-unexpanded">を持っている場合は、メディアブレークポイントから同じスタイルを取ります低いブレークポイント（小）。

もちろん、フレームワークメトリック（ブレークポイント、最大幅）を変更した場合は、上記のコードも修正する必要があります。