Foundation6: Erweiterte Zeile für Haltepunkte

Question

Ich möchte ändern, wie die Zeile für verschiedene Haltepunkte wie folgt erweitert. Grundsätzlich lassen sich unterhalb unterhalb des mittleren und oberhalb des großen Bruchpunktes Expandieren.

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

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

</div> 

Ich weiß, dass diese Klasse nicht verfügbar ist, aber wie kann ich dies erreichen.

Answer 1

Ich bin nicht sicher, warum Sie dies tun möchten, wird die Zeile automatisch auf die verfügbare Breite erweitert, bis sie die maximale Breite erreicht, und bleibt dann auf dieser Breite (Standard maximale Breite ist 1200px, kann geändert werden auf Customizer- oder SASS-Einstellungen), jedoch können wir die von Ihnen erwähnte Klasse erstellen.

Code:(vorausgesetzt, Sie die Standardhaltepunkte verwenden)

/* 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 } 
} 

Dieser Code ist Handy-first, so, wenn Sie <div class="small-expanded large-unexpanded"> haben, nehmen mittlere Haltepunkt die gleichen Stile von der unterer Haltepunkt (klein).

Wenn Sie Framework-Metriken (Breakpoints, maximale Breite) geändert haben, sollten Sie natürlich auch den obigen Code ändern.