ZURB Gründung letzte Spalte überläuft auf nächste Zeile

Ich habe eine einfache Spaltenlayout bekommt ZURB Foundation mit 5:ZURB Gründung letzte Spalte überläuft auf nächste Zeile

<div class="row"> 
     <div class="small-1 columns">1</div> 
     <div class="small-10 columns">10</div> 
     <div class="small-1 columns">1</div> 
</div>

aber unterhalb einer bestimmten Breite der letzte Spalte bricht in der nächsten Zeile aus, obwohl es viel Platz für alle Inhalte.

Demo hier: https://jsfiddle.net/kqscrxpq/

Edit: Ich möchte verstehen, warum es dies tut, vor allem angesichts der scheinbaren freien Speicherplatz noch zur Verfügung, und dann hoffentlich eine entsprechende Korrektur finden.

Quelle

2016-05-25 stovroz

Gibt es eine Frage? Es macht das wegen der Auffüllung. Entfernen Sie das Padding aus dem '.small-1' und Sie sind fertig. –

Ich bin mir nicht sicher, was du meinst * "wegen der Polsterung" *. Das Padding ist offensichtlich ein wesentlicher Teil des Layouts des Frameworks und fungiert als Regenrinne. Es scheint also merkwürdig, dass ich in diesem einfachen Szenario damit herumspielen sollte. Nichtsdestoweniger habe ich Ihren Vorschlag versucht, aber das Entfernen der gesamten Füllung aus der letzten Spalte schien nicht zu helfen. – stovroz

Ich entfernte Padding in Ihrem Beispiel und es funktionierte gut für mich. Denken Sie daran, Foundation ist nicht so klein, dass kein kleines Gerät in diesem Verhältnis existiert. Sie können jedoch * einen * xsmall' Breakpoint erstellen, wenn Sie möchten. Dies würde die kleinere Polsterung berücksichtigen und ein so kleines Ansichtsfenster ermöglichen. –

Dies ist, weil die Auffüllung von small-1 Spalte 30px insgesamt fixiert ist und wenn Breite small-1 Spalte weniger als die Auffüllung erhält, bricht die Spalte auf nächste Zeile.

Wenn die Fenstergröße 359px beträgt, wird die Größe der Spalte 8.333333 % of 359px = 29.91px sein, was weniger als die Auffüllung ist, so dass die Breite der Spalte nicht weniger als 30px beträgt. Der verbleibende Speicherplatz ist 29.91px und 30px Spalte wird in die nächste Zeile wechseln.

Quelle

2016-05-26 09:01:43

ZURB Gründung letzte Spalte überläuft auf nächste Zeile

Antwort

Verwandte Themen