Das zweite Element in einer verschachtelten Zeile fügt immer zusätzliche Ränder hinzu und verwirft das Layout - zurb-foundation

Ich arbeite mit Foundation 5, keiner meiner eigenen benutzerdefinierten Stile. Ich bin in der Reihenfolge, app.css, modernizr.js, jQuery, Fastclick und foundation.min.js.

Ich habe die Anweisungen in meinem Tutorial befolgt("Lynda: Up and Running With Foundation") und auf der Zurb-Website zum Erstellen einer verschachtelten Zeile, aber es gibt ein Problem: Die letzte Zelle in der Zeile springt immer um einen kleinen Betrag und wirft nicht nur den Textfluss weg aber das gesamte Seitenlayout: Auf mobilen Geräten bedeutet dieser kleine Stupser, dass die Seite von einer Seite zur anderen geswiped werden kann.

Hier ist ein Screenshot von dem, worüber ich rede.

Mein HTML ist

<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We"re Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>

Was habe ich falsch gemacht?Ich kann keine Informationen über Google oder StackOverflow darüber lesen, ich habe den Code sorgfältig durchgelesen, ich habe ihn heruntergerissen und nach Code-Beispielen neu geschrieben ... Ich verstehe einfach nicht, was ich habe verpasst.

Antworten:

1 für die Antwort № 1

Also, obwohl die Verwendung von großen 3 Spalten approximiertFür die korrekte Ausgabe benötigen Sie eine etwas andere Struktur. Es gibt viele Möglichkeiten, Dinge zu tun, aber die Sache zu erinnern ist, dass, wenn Sie ein Gitter oder ein verschachteltes Gitter verwenden, alle Spalten bis zu insgesamt 12 Spalten hinzufügen müssen. In Ihrem Fall haben Sie ein verschachteltes Raster, das 6 ergibt. Dies gibt Ihnen eine inkonsistente Ausgabe, sofern Sie nicht beabsichtigen, dass ein Teil der Spalte leer ist. In diesem Fall können Sie die Präsentationsklasse .end verwenden, um sie nach links zu treiben.

Hier ist eine Reihe von verschachtelten Gittern, die ungefähr dem entsprechen, was ich glaube.

<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We"re Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>

Verwandte Fragen