Ändern Zurb Foundation grid-Spalten, so die Polsterung ist nur auf einer Seite

Weiß jemand, ob es eine Einstellung um die Spalte-Dachrinne nur auf einer Seite? Derzeit fügt es die Hälfte auf jeder Seite der Spalte, so zum Beispiel, wenn Sie wollte 14px Spalte Gosse, würde es 7px auf jeder Seite. Dies bewirkt, dass die erste Spalte in einer Zeile zu haben 7px Einzug.

Konnte ich hacken es mit der extra CSS, aber ich würde es vorziehen, es zu ändern in Standardeinstellungen, wenn ich kann.

InformationsquelleAutor Desmond | 2013-09-16

  1. 9

    Es ist nicht möglich, soweit ich weiß, ohne erstellen Sie Ihre eigenen Mixins oder die änderung der bestehenden grid-Spalte mixin, und das ist nicht etwas, was Sie machen wollen für einen einfachen Fall wie das.

    Ich würde vorschlagen, stattdessen erstellen Sie Ihre eigenen Klasse für diese, zum Beispiel:

    SASS

    .left-collapse {
  .columns {
    padding-left: 0;
    padding-right: $column-gutter;
  }
}

    Und dann fügen Sie einfach die Klasse, um Ihre übergeordneten Zeile, fast wie Sie wollen, um zu tun, die mit einem Zusammenbruch Klasse für die Beseitigung aller Dachrinne Breite - so you ' r Zeile würde dann wie folgt Aussehen:

    <div class="row left-collapse">
   <div class="large-4 columns">FOO</div>
   <div class="large-4 columns">FOO</div>
   <div class="large-4 columns">FOO</div>
</div>

    Wenn you ' r nicht mit SASS dann nur in $Spalte-Dachrinne Größe (Standard bei v4: 1.875 em) in padding-right in der CSS-Datei.

    Dank am_, das macht sehr Sinn. Werde ich machen verwenden der Zusammenbruch der Klasse sicher. Schätzen Sie Ihre Antwort.
    +1 für sass und es einfach Sinn macht.

    InformationsquelleAutor am_

  2. 0

    Habe ich bemerkt dass auf der Grundlage Docs 6 Seiten, Sie enthalten eine .row .row Klasse. Dies fügt negative Margen auf den block Gitter Beispiel:

    .row .row {
  margin-left: -0.9375rem;
  margin-right: -0.9375rem;
}

    Eine Lösung wäre, nach dem Muster aufgebaut, in der .row row selector und fügen Sie

    .left-collapse {
  .margin-left: -$column-gutter;
}

    InformationsquelleAutor icicleking

  3. 0

    Für eine gleichmäßige Rinne auf jeder Seite, Sie können schwer-code:

    .collapse-half {
  .columns {
    padding-left: .46875rem;
    padding-right: .46875rem;
  }
}

    InformationsquelleAutor dwenaus

Schreibe einen Kommentar