Bootstrap中的栅格系统-CSDN博客

本文链接：https://blog.csdn.net/weixin_44538469/article/details/87734511

开发工具与关键技术：Adobe Dreamweaver CC 2017 前端

作者：刘剑鸿

撰写时间：2019年2月19日星期二

                 Bootstrap中的栅格系统

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，对网页布局非常方便和实用。Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，完全基于flexbox流式布局构建的，完全支持响应式标准。

在这里插入图片描述

                                                                    （本截图来自Bootstrap手册）

两个格之间的宽度并不是固定，也可通过代码设置该宽度。例如；

在这里插入图片描述

                                                                 （ 本截图来自Bootstrap手册）

在row类内，col-x中的x之和不能超过12.而且x也不能超过12，否则该效果无效。或者我们有时候没必要设置col-x中的x，我们可运用w-100来实现跨多个行等宽列，方法是使用w-100将其拆分，如下截图；
在这里插入图片描述
使用flexbox布局和它搭配，效果更好。可轻松的实现DIV空间布局的垂直、水平对齐