2012-10-11 5 views
6

Im mit ZURB Foundation 3 auf ein Projekt von mir. Ich liebe Grid-Systeme und responsive Sites, aber mein Problem ist, dass ich immer noch davon überzeugt bin, dass sie breiter als 1000px sein sollten.Zurb Foundation 3 - Volle Breite Abschnitte & Ändern der maximalen Breite?

Ich habe ein paar Fragen:

1) Zunächst einmal würde ich lieben bestimmte Abschnitte (divs) voller Breite zu machen. Jetzt habe ich gelesen, ich kann zum Beispiel nur <div class="row"> durch <div class="container"> ersetzen und es wird diesen Effekt erzeugen. Aus irgendeinem Grund fühlt sich das nicht richtig an, sollte ich einfach meine eigene Klasse erstellen, die die volle Breite hat, oder was wäre der richtige Weg, dies zu tun?

2) Ich würde es gerne für eine größere Auflösung, vielleicht eine maximale 1440px Breite oder sogar eine Flüssigkeit 100% volle Breite haben. Wie könnte ich das tun und/oder ist Foundation nicht der richtige Rahmen für mich? Ich liebe die Tatsache, dass es mit allen Vorlagen kommt, so ist super schnell und freundlich, Mockups zu tun.

Vielen Dank im Voraus.

+0

Planung für eine bestimmte Breite Auseinandersetzungen mit dem gesamten Konzept von Responsive Design. – cimmanon

+1

Ja, ich bekomme das, aber statt der Standard "max-width" von 1000px oder 960 zum Beispiel würde ich lieber den Standardwert auf 1440px usw. erhöhen. Dies sollte die Reaktionsfähigkeit nicht beeinflussen. Fühlen Sie sich frei, mir zu erklären, warum sie immer eine maximale Breite von 940-1000px haben? – matt

+0

@cimmanon Er fragte nicht, wie er eine bestimmte Breite erstellen soll. Er fragte, wie die maximale Designbreite im Foundation-Framework festgelegt werden könne. Max-width! = Width –

Antwort

11

Update: Bitte stoppen Sie abstimmen diesen Beitrag. Der Rahmen hat sich seit der Beantwortung der Frage erheblich verändert. Wenn Sie Foundation 4 oder höher verwenden, sehen Sie sich bitte die aktualisierten Antworten an und stimmen Sie sie ab.

Für Frühe Versionen von Foundation 3 nur Fügen Sie die folgende Überschreibung zu Ihrem CSS (Dies muss nach oder am Ende des foundation.css erscheinen)

.row { 
    width: 100%; 
} 

Dies ist die Standardeinstellung außer Kraft gesetzt wird mit der Rahmen und machen das Design im Vollbildmodus. Fühlen Sie sich frei, diesen Wert Ihren Bedürfnissen anzupassen.

Es gibt auch eine maßgeschneiderte Download unter http://foundation.zurb.com/download.php (was wahrscheinlich das Gleiche tut, überschreibt oder ersetzt .row Breite)

+1

Tolles Dankeschön, im Idealfall könnte ich einfach eine neue Klasse namens ".full-row" erstellen und diese 100% auch richtig machen? Ich sah die benutzerdefinierte Download-Version, aber es sagt Max-Breite und ich nahm an, dass war nur für die mobile Version ... weil der Wert der Zeile für mich scheint 1000px und die Standard-Download maximale Breite ist 940px. – matt

+0

Ich bin mir nicht sicher, wie das Hinzufügen einer neuen .full-row Klasse funktioniert. Es gibt mehrere CSS-Klassen, die ihre Selektoren von der .row-Klasse entfernen. Bevor ich diese Änderung umsetze, würde ich fundation.css prüfen. –

+0

Bitte markieren Sie dies als die Antwort, wenn es Ihr Problem löst. Vielen Dank. –

7

Editing/übergeordnete Grundlage ist einfach. In Foundation 4 können Sie Ihre _settings.scss-Datei bearbeiten. Uncomment out $ row-width: emCalc (some_number.px); zu einer Reihenbreite, die Sie verwenden möchten.

1

uncommenting $row-width: rem-calc(1000); arbeitete für mich