Zurb Foundationを初めて使用し、から始まるバージョン4では、小さな画面でのみグリッドを中央に合わせてから、大きな画面でデフォルトのグリッドに戻す方法を見つけることはできません。これを行うためのFoundation 4に付属のネイティブクラスはありますか？
私は彼らのドキュメンテーションを見ました。 http://foundation.zurb.com/docs/components/grid.html 意図したとおりに動作する「小中心」と「大中心」のクラスを示していますが、
小さなバージョンは、大きなバージョンで上書きされない限り、すべてのブレークポイントを実行します。
私には、大型ディスプレイの「小規模センター」クラスからのセンターアライメントをオーバーライドするクラスを作成する必要があるか、クラスが存在するかのように聞こえます。これは見つけることができません。
ここで私がテストしているいくつかのサンプルコードです：
<div class="row">
<div class="large-2 columns">
<span>text</span>
</div>
<div class="large-6 columns">
<span>text</span>
</div>
<div class="large-4 columns">
<span>text</span>
</div>
</div>
グリッドシステムは期待どおりに機能しますが、3つの列すべてを小さな画面で中央揃えにします。
自分のクラスとスタイルを作成する必要がある場合は、すでにこの問題に対処しているコミュニティでSCSSを使用できることを知っている人はいますか？
回答：
回答№1の場合は3これはすぐにサポートされていないことが判明しました。しかし、単純な修正があり、それは私のコメントで提案したように上書きを追加することです。
@media only screen and (min-width: 48em) {
.column.large-left,
.columns.large-left {
float: left !important;
}
}
の使用に注意してください em それは物事を行う財団の標準的な方法です。それは、 smal-centered 問題。そのクラスをどのクラスにも追加するだけです small-centered あなたが中心にしたくない要素。 それを実際にここで見る.
回答№2の場合は3
Foundation non-semanticクラスでそれを行うことはできません。
あなたは手動で（うまくいけば）意味的にそれをしなければなりません：
@media only screen and (max-width: 767px) {
.some-container { text-align: center; }
}
回答№3の場合は0
CSSファイルをチェックアウトし、小さな画面専用のメディアクエリを検索し、その特定の列のプロパティを追加する必要があります。