淘先锋技术网

首页 1 2 3 4 5 6 7

1.栅格系统的一些问题

1.1 gutter是什么?
<body id="row-container" style="margin:0 auto;margin-left:200px;border:1px solid blue;position: absolute;">
 <div id="row" style="background: #ccc;height:100px;border:1px solid red;display: inline-block;">

    <div style="height:100px;width:500px;display: inline-block;">
    </div>
 </div>
</body>

运行上面的代码你会发现,当子元素div#row的margin-left:-10px;margin-right:-10px;时候,子元素在左侧和右侧都超出了父元素10px!
我们下面来分析一下栅格系统的原理:
这里写图片描述
其中蓝色的是Row的父元素,而红色的是Row,你会发现当给Row设置了gutter={16}的时候Row元素在左侧和右侧超出了父元素8px。此时,Col元素相对于Row的父元素来说左侧和右侧是紧紧靠在一起的,此时Row的父元素和Row的子元素的位置正是我们想要的,Col之间的距离为16px。

1.2 gutter设置后元素的大小有没有变化?

结果是设置了gutter后元素变小了。下面是一个例子:
设置gutter前后我们的Row的父元素没有发生变化,都是563px。未设置gutter时候 ,Row的宽度为561px,每一个col的宽度为563/4=140px。设置了gutter以后,Row的宽度为561+16(margin-left和margin-right负数拉伸了元素大小)=577px,col本身的宽度为(563-8*2*3)/4=128。图见上面的图。所以设置了gutter={16}后,col从原来的140变成了128了~~~。注意:我们计算子元素Col的宽度是: [Row的父元素的宽度-gutter*(n-1)(n为Col的个数)]/n

1.3 offset设置的值

使用 offset 可以将列向右侧偏。例如,offset={4} 将元素向右侧偏移了 4 个列(column)的宽度。

1.4 push和pull设置

通过使用 push 和 pull 类就可以很容易的改变列(column)的顺序。push表示左偏多少列,而pull表示从右往左拉

参考资料:
boostrap中lg,md,sm,xs之768,992,1200
Bootstrap 栅格系统 理解与总结
Bootstrap学习——栅格系统
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
全局 CSS 样式
因为盒模型变成了border-box,所以添加了gutter后元素本身的大小变小,padding变大了