Foundation Margin zwischen Spalten funktioniert nicht

Question

Zunächst einmal weiß ich, es ist eine wiederholte Frage (here oder here), aber die Lösung hat nicht für mich gearbeitet.

Das ist mein Problem: Ich habe eine Webseite mit der folgenden Struktur:

<div class="row"> 
    <div class="small-1 columns">...</div> 
    <div class="small-8 columns">...</div> 
    <div class="small-3 columns">...</div> 
</div> 

In meiner 8-Säule ich einen Panel-Container habe, und im Innern:

<div class="row"> 
    <div class="small-1 columns">COLOR</div> 
    <div class="small-2 columns">TITLE</div> 
    <div class="small-1 columns">NAME</div> 
    <div class="small-2 columns">SURNAME</div> 
    <div class="small-2 columns">ADDRESS</div> 
    <div class="small-2 columns">POSTAL CODE</div> 
    <div class="small-2 columns">SUMMARY</div> 
</div> 

Dies ist der Inhalt:

Ich möchte jede Spalte mit einem Abstand Trennzeichen. Aber, wenn ich versuche, diese Lücke zu addieren (mit Eigenschaft margin):

Jede Idee?

Vielen Dank im Voraus!

Answer 1

Foundation erstellt Lücke (aka Gutter) mit einer Kombination von linken und rechten Auffüllen und prozentualen Breite auf .columns. Werfen Sie einen Blick auf diese von foundation.css:

.column, .columns { 
    padding-left: 0.625rem; 
    padding-right: 0.625rem; 
    width: 100%; 
    float: left; 
} 
.small-1 { width: 8.33333%; } 
.small-2 { width: 16.66667%; } 
... 

Durch das Hinzufügen Marge auf den Säulen, stören Sie die Breiten und .row> 100% machen, weshalb es bricht. Als allgemeine Regel empfehle ich, niemals Spalten zu Spalten hinzuzufügen, da dies das Gitter durchbricht.

Sie haben ein paar Optionen:

1 - die Zeile kollabieren und Ihre eigene Polsterung mit zusätzlichen Klassen in den Spalten Kinder

<div class="row collapse"> 
    <div class="small-1 columns"><div class="inner">COLOR</div></div> 
    <div class="small-2 columns"><div class="inner">TITLE</div></div> 
    <div class="small-1 columns"><div class="inner">NAME</div></div> 
    <div class="small-2 columns"><div class="inner">SURNAME</div></div> 
    <div class="small-2 columns"><div class="inner">ADDRESS</div></div> 
    <div class="small-2 columns"><div class="inner">POSTAL CODE</div></div> 
    <div class="small-2 columns"><div class="inner">SUMMARY</div></div> 
</div> 

.inner {background:#666; margin:0 5px; padding:5px;} 

2 hinzufügen - Es sieht aus wie Sie versuchen, eine erstellen Art Diagramm. Es ist keine Schande, eine tatsächliche HTML-Tabelle für Tabellendaten zu verwenden (dafür ist es zuständig). Foundation's Standard-Stil von Tabellen ist eigentlich ganz nett.