2013-04-07 9 views
13

Według Foundation's docs on the grid component mogę w zasadzie zrobić 1 lub więcej kolumn siatki przestrzeń używając ich zajęcia Offset:Możliwość dodania przesunięcia na prawo od elementu w siatce Zurb Foundation 4?

<div class="row"> 
    <div class="large-1 columns">1st column</div> 
    <div class="large-9 large-offset-2 columns">2 spaces to the left of this column</div> 
</div> 

To uczyni 1 kolumnę, a następnie 2 kolumny zwykłego przestrzeni i 9 kolumn. Czy możliwe jest przesunięcie tych przesunięć na prawo od elementu zamiast lewego? Na przykład coś takiego?

<div class="row"> 
    <div class="large-1 columns">1st column</div> 
    <div class="large-9 large-offset-right-2 columns">2 spaces to the right</div> 
</div> 
+0

Czy możesz pokazać obraz tego, co próbujesz osiągnąć? – vtacreative

Odpowiedz

17

Zakładając Rozumiem żądania poprawnie, to brzmi jak po prostu trzeba użyć end zamiast offset. Na przykład:

<div class="row"> 
    <div class="large-1 columns a">1st column</div> 
    <div class="large-9 columns end">2 spaces to the left of this column</div> 
</div> 
+1

To działa! Dlaczego masz klasę 'a' w 1. kolumnie' div'? Dlaczego nie widzę klasy 'end' udokumentowanej gdziekolwiek w dokumentacji Foundation Grid? –

+2

@at. nie przenieśli tych informacji do dokumentów V4. Jest to [udokumentowane na stronie V3] (http://foundation.zurb.com/old-docs/f3/grid.php). –

+0

Awesome! Skoro zadziałało, czy możesz, proszę, sprawdź odpowiedź jako poprawną? Jestem głodny 15 punktów hahaha ... To jest w dokumentach, a przynajmniej w tym 'http: // foundation.zurb.com/old-docs/f3/grid.php'. W ten sposób wiedziałem, jak go używać. Och, "a" pochodzi z "https: // gist.github.com/CL75/4657937", dzięki czemu szybko zmieniłem kolor każdego elementu, dzięki czemu mogę sprawdzić pozycjonowanie. Możesz go używać, ale uważaj na ewentualne przesłonięcia (np. Jeśli masz własną klasę "a", "b" itd. "A" nie ma znaczenia dla wykonania pracy "koniec", zapomniałem ją rozebrać, przepraszam za zamieszanie! – vtacreative

Powiązane problemy