栅格系统的标准用法_栅格布局[通俗易懂]

编程小号 • 2024-05-08 23:30 • 未分类

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变大了

今天的文章栅格系统的标准用法_栅格布局[通俗易懂]分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/89083.html