Foundation 4 Center richtet sich nur auf kleinem Bildschirm aus - sass, zurb-foundation, css-frameworks

Neu bei der Nutzung der Zurb-Foundation und beginnend mitVersion 4, ich kann keinen Weg finden, das Raster nur auf kleinen Bildschirmen zur Mitte auszurichten und dann auf großen Bildschirmen zum Standardraster zurückzukehren. Gibt es native Klassen, die mit Foundation 4 geliefert werden?

Ich habe mir ihre Dokumentation angesehen http://foundation.zurb.com/docs/components/grid.html das zeigt die Klassen "klein-zentriert" und "groß-zentriert", die wie beabsichtigt funktionieren, aber es gibt eine Zeile, die sagt

Kleine Versionen werden alle Breakpoints durchlaufen, wenn sie nicht durch eine große Version überschrieben werden.

Für mich hört sich das so an, als müsste ich entweder eine Klasse erstellen, die auf großen Displays die zentrierte Ausrichtung von "Small-Center" -Klasse überschreibt oder dass eine Klasse existiert - diese kann ich nicht finden.

Hier ist ein Beispielcode, mit dem ich gerade teste:

<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>

Das Rastersystem funktioniert wie erwartet und beabsichtigt, aber ich möchte, dass alle drei Spalten nur auf kleinen Bildschirmen zentriert werden.

Muss ich, wenn ich meine eigenen Klassen und Stile erstellen muss, auf SCSS aufmerksam sein, das der Community möglicherweise bereits zur Verfügung steht?

Antworten:

Es stellt sich heraus, dass dies nicht out-of-the-Box unterstützt wird. Es gibt jedoch eine einfache Lösung, und zwar durch Hinzufügen der Überschreibung, wie ich es in meinem Kommentar vorgeschlagen habe.

@media only screen and (min-width: 48em) {
.column.large-left,
.columns.large-left {
float: left !important;
}
}

Beachten Sie die Verwendung von em Das ist die Art und Weise, wie die Foundation funktioniert. Das sollte sich um das kümmern smal-centered Problem. Sie müssen diese Klasse dann nur noch hinzufügen small-centered Elemente, die Sie nicht zentriert wollen. Sie können Sehen Sie es hier in Aktion.

Das können Sie mit Foundation nicht-semantischen Klassen tun.

Sie müssen es manuell und (hoffentlich) semantisch machen:

@media only screen and (max-width: 767px) {
.some-container { text-align: center; }
}

Sie müssen CSS-Dateien auschecken und nach Medienabfragen suchen, die nur für kleine Bildschirme vorgesehen sind, und dann Eigenschaften für diese spezifische Spalte hinzufügen.