skel 网格中的偏移列答案

【问题标题】：offset columns in a skel gridskel 网格中的偏移列
【发布时间】：2017-01-30 15:48:39
【问题描述】：

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

例如这个引导代码：

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

相当于：

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

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

我尝试在徐之后添加一列。使用 bootstrap 我们使用 offset 属性：

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

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

【问题讨论】：

HTML5up 不是一个框架。这是一个提供 HTML 模板的网站。
@ZimSystem 感谢您的建设性评论，即使它根本没有帮助我

标签： html grid multiple-columns skel

【解决方案1】：

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

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

对于偏移列，解决方案是 -2u。

【讨论】：

【解决方案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>

【讨论】：