骨架网格中的偏移列

Question

我使用 HTML5up 模板中的 dopetrope 布局。它使用像 Bootstrap 这样的网格系统。

例如这个 bootstrap 代码：

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

相当于：

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

在 HTML5up 中。 "u" 是网格的单位。

我试着在徐后面加了一栏。对于 bootstrap 我们使用偏移属性 :

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

编辑：我刚刚发现它是基于 skel.io。我期待着这个方向。

Answer 1

我在 skel 文档中找到了解决方案。

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

偏移列的解决方案是-2u。

Answer 2

要在skel.js上给出元素偏移，只需写负数列比如：class="-2u" = col-offset-2。确定偏移写入的屏幕 class = "-nubmer(屏幕)" ==>> class=" -3u(小) "

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>

骨架网格中的偏移列

offset columns in a skel grid

html

grid

multiple-columns

skel