html - skel 网格中的偏移列

Question

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

例如这个引导代码：

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

相当于：

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

在 HTML5up 中。“u”是网格的单位。

我试图在徐之后添加一列。使用引导程序，我们使用偏移属性：

`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(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>