Abstand zwischen den Rasterzellen in Zurb Foundation 4

Gibt es eine einfache Möglichkeit zu haben, Abstand zwischen den Rasterzellen in Zurb Foundation 4? Ich will nicht Durcheinander mit der CSS von der Stiftung Elemente, die möglicherweise werfen Sie etwas anderes aus. Es gibt eine $column-gutter SCSS Variablen, die in Ihrer Grid-docs:

$column-gutter: 1.875em !default;

Allerdings bin ich mir nicht sicher, was das ist, wie ich haben scheinbar null Platz zwischen den Spalten, nicht 1.875 em. Bin ich erwartet, so stellen Sie sicher, dass alle Inhalte innerhalb der Zellen haben, die Polsterung um Sie herum?

  • Meinst du wie die Polsterung? Es würde hilfreich sein, mit einem Beispiel.
  • ja Polsterung. Wenn ich Inhalte in das raster-Zellen, der Inhalt bündig an den Seiten
  • Ich würde gerne wissen, was der Punkt, der $column-gutter ist, wie ich es nicht sehen können mit jedem Effekt entweder. Wir müssen uns fehlt einen trick hier.
InformationsquelleAutor at. | 2013-03-05
  1. 6

    Versuchen, verwenden Sie eine separate stylesheet geladen wird nach der Stiftung.css wo der Inhalt sieht ungefähr so aus:

    @media only screen {
  .row .columns, .row .column {
    padding-left: 10px; /* change the values to anything that you want */
    padding-right: 10px;
  }
}

    Ich es in die @media only screen da für den Druck die Sie vielleicht nicht wollen, es zu haben anzeigen mit der extra-Polsterung.

    Beispiel dieses hier

    Wenn Sie möchten, verwenden Sie diese zusätzliche Polsterung beim drucken Sie haben die folgenden:

    .row .columns, .row .column {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

    Du haben zu nutzen, die wichtiger Bestandteil, da es die @media only screen im Standard-Stiftung.css überschrieben wird Ihre Werte.

    BEARBEITEN

    Verwenden Sie einfach eine separate Klasse für die Spalten, die Sie möchten, dass die extra-Polsterung angewendet.
    Beispiel:

    .extra-padding {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

    Beispiel dieses hier

    • Macht Sinn, meine einzige Sorge, ob das alles Auswirkungen auf andere Teile der Stiftung in irgendeiner Weise?
    • Es wird sich nicht auf Stiftung selbst, aber es könnte sich ändern einige andere layouts, die Sie nicht ändern möchten. Schauen Sie sich meine post bearbeitet.
    InformationsquelleAutor emilhem
  2. 2

    Können Sie hinzufügen offsets

    <div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>

    http://foundation.zurb.com/docs/components/grid.html

    • nicht das, was ich gefragt hatte
    • Die Frage war für das ändern der vorhandenen Dachrinne, um einen diff-Wert, nicht die Einführung von zusätzlichen Spalten.
    InformationsquelleAutor paulusm
Schreibe einen Kommentar