Смещенные столбцы в скелевой сетке

Question

Я использую макет допетропа из шаблона HTML5up. Который использует систему сетки, как Bootstrap.

Например, этот код начальной загрузки:

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

будет эквивалентно:

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

в HTML5up. "U" - это единица сетки.

Я пытался добавить столбец после Сюй. При начальной загрузке мы используем атрибут смещения:

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

РЕДАКТИРОВАТЬ: я только что узнал, что он основан на skel.io. Я с нетерпением жду в этом направлении.

Answer 1

Я нашел решение в Skel Doc.

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

Решение -2u для смещенных столбцов.

Answer 2

Чтобы задать смещение элемента в skel.js, просто напишите номер отрицательного столбца, например: class="-2u" = col-offset-2 . определить экран смещения записи class = "-nubmer(screen)" ==>> class=" -3u(small) "

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

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

.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>