Question

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

例如这个引导代码：

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

相当于：

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

HTML5up中的

。＆＃34; u＆＃34;是网格的单位。

我试图在徐之后添加一个专栏。使用bootstrap，我们使用offset属性：

`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上给出Element偏移量，只需写入负列数喜欢：class =＆＃34; -2u＆＃34; = col-offset-2。确定偏移写入的屏幕 class =＆＃34; -nubmer（screen）＆＃34; ==＆GT;＆GT;类=＆＃34; -3u（小）＆＃34;

＆＃13;

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 }
		}
	}
});

＆＃13;

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

＆＃13;

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

＆＃13;

skel网格中的偏移列

2 个答案: