Offset-Spalten in einem Skel Raster

Question

Ich verwende das Dopetrope Layout von HTML5up Vorlage. Das verwendet ein Grid-System wie Bootstrap.

Zum Beispiel dieser Bootstrap-Code:

`"class="col-md-6 col-xs-12"` 

wäre gleichbedeutend mit:

`class="6u 12u(mobile)"` 

in HTML5up. Das "u" ist die Einheit des Gitters.

Ich habe versucht, eine Spalte nach Xu hinzuzufügen. Mit Bootstrap verwenden wir Offset-Attribut:

`class="col-md-offset-2"`. 

EDIT: Ich habe gerade herausgefunden, es basiert auf skel.io. Ich freue mich in diese Richtung.

Answer 1

Ich fand die Lösung in der Skel Doc.

https://github.com/ajlkn/skel/blob/master/docs/skel-layout.md#offsetting

Die Lösung ist für den Offset -2U Spalten.

Answer 2

um das Element Offset auf skel.js zu geben schreibe einfach die Nummer der negativen Spalte wie: class = "- 2u" = col-offset-2. zu bestimmen Bildschirm des Offset-Schreib class = "-nubmer (Bildschirm)" == >> class = "-3u (small)"

skel.breakpoints({ 
 
\t xlarge: "(max-width: 1680px)", 
 
\t large: "(max-width: 1280px)", 
 
\t medium: "(max-width: 980px)", 
 
\t small: "(max-width: 736px)", 
 
\t xsmall: "(max-width: 480px)" 
 
}); 
 

 
skel.layout({ 
 
\t reset: "normalize", 
 
\t containers: true, 
 
\t grid: true, 
 
\t breakpoints: { 
 
\t \t medium: { 
 
\t \t \t containers: "90%" 
 
\t \t }, 
 
\t \t small: { 
 
\t \t \t containers: "95%", 
 
\t \t \t grid: { gutters: 20 } 
 
\t \t }, 
 
\t \t xsmall: { 
 
\t \t \t grid: { gutters: 10 } 
 
\t \t } 
 
\t } 
 
});

.row div{ 
 
    background-color:#3498db; 
 
    color:#fff; 
 
    text-align:center; 
 
    padding:5px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel-layout.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="5u"> 
 
     Five 
 
    </div> 
 
    <div class="5u -2u(medium)"> 
 
     Five 
 
    </div> 
 
    </div> 
 
    <div style=" 
 
    color:#666; 
 
    text-align:center; 
 
    padding:5px"> - Click Run Code Snippte then make full Page and Resize the window to show the offset </div> 
 

 
</div>