--- title: "充分理解bootstrap的栅格系统" url: "https://yjyj.net/css/5523.html" author: "小 虾 (生猛大蝦编辑部)" published_at: "2016-08-11T18:02:23+08:00" updated_at: "2016-08-11T18:03:21+08:00" categories: "前端杂烩" tags: "bootstrap, CSS布局技巧, Docker容器, HTML/CSS, 前端" summary: "本文用通俗方式拆解 Bootstrap 栅格系统：把 12 列等宽表格、容器与行、col 前缀拆分、响应式断点、隐藏显示与 push/pull/offset 一次讲透，并给出间距调整的实操思路，适合快速上手跨屏布局。" source: "生猛大蝦 (https://yjyj.net)" --- # 充分理解bootstrap的栅格系统 > 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/5523.html) · 作者：小 虾 · 发布时间：2016-08-11 ## 30 秒核心看点 (TL;DR) - 把 Bootstrap 栅格理解成 12 列等宽表格，内容塞进 col-* 单元格即可。 - 容器负责居中承载，row 配合 col 的 15px 内边距形成默认 30px 间距。 - 手机端会自动纵向堆叠；push/pull/offset 可做左右互换和偏移。 Bootstrap手册里对自身的栅格系统讲解的比较古板。初上手的朋友读完一遍也是云里雾里，在此说一说我个人的理解。什么是栅格系统？请参看我写的前两篇文章 网页设计中的960栅格系统（一）和 网页设计中的960栅格系统（二） 抽象的表格 Bootstrap的栅格系统能自动根据当前设备的屏幕分辨率，横向分配出12个等宽的单元格，你完全可以理解为bootstrap栅格系统就是一个具有相等宽度的12列表格，然后把具体的网页内容，放进这些单元格里。通过前缀为col- 的class数值变换，实现单元格之间的合并和拆分。总之，单元格数量要小于等于12 ，例如： Bootstrap的栅格布局 [](https://yjyj.net/wp-content/uploads/2016/08/1470909774-7358-2329615-cd20261dc3e66a76.png) 抽象的表格 单元格的承载 [](https://yjyj.net/wp-content/uploads/2016/08/1470909750-7221-2329615-7af128ef36598349.png) 单元格 为了适应跨屏浏览，Bootstrap为单元格预定义了4种class ，分别对应于手机、ipad、笔记本电脑、台式机。 Bootstrap的栅格类型 在使用这些单元格之前还要求在最外面套上两个div容器来承载，具体书写代码如下； [](https://yjyj.net/wp-content/uploads/2016/08/1470909754-8312-2329615-aada99f61eb4dc75.png) 容器代码 Container 负责整个屏幕的内容承载，不管里面的单元格怎么摆放，保证不会跑出这个圈子。 Row 代表一个整行（不限制高度） … 表示你的代码片段，可随便嵌套。 我们通过控制col-xx-xx的大小拆分，就能实现各种栏目的尺寸修改，当然它们之间是有一个默认间距的存在。接下来，我们研究一下如何调整这个默认的间距。 栅格的间距 Bootstrap栅格系统采用了剧中方式布局，也就是在单元格左右各自定义了15px的padding，从而造成相邻两列的间距为30px，这个数值不一定适合每一个网站，所以我们希望能修改它。 bootstarp栅格具有15px的间距 下面我通过一个两列布局的效果来说明，试验的前置条件；做一个固定宽度960px的div盒模型padding=0px margin=0px，目的是对比观察bootstrap栅格系统的默认状态和尺寸。为了效果醒目，我把高度都写死为100px。这里我用col-md- 的class来实施，效果如下： 结论： - bootstrap栅格在中等尺寸屏幕里的宽度为970px，随着屏幕分辨率的不同这个值也会自动调整，这不是关注重点，重点在于保证了固定宽度且居中对齐的布局效果。 - Container 和row 两个承载容器的padding=0 margin=0 - col-类的内边距padding：0px 15px ，并且不能通过复写col类的样式来控制padding尺寸。 - 只能通过定义col的子级元素来实现15px间距覆盖，在子元素的css中要添加margin：0px -15px；最终效果如下图 显而易见，只要我们调整子元素的margin边距，就能实现左右分栏的间距大小。 [](https://yjyj.net/wp-content/uploads/2016/08/1470909780-3979-2329615-705f18717c530388.png) 跨屏布局 直观的讲，我们把md、lg、 xs、sm 这四个类放入一个div标签后，这个div容器就可以自动实现不同设备的跨屏，只要记住超出的右侧容器会浮动向下排列就行。比如；一个两列布局的页面，它在pc端可能左侧宽度达到了700px，右侧是270px，通过手机访问后（屏幕宽度只有340px），它先显示左侧700px的分栏内容并且填充满一行340px，但这个容器里的内容会浮动的垂直排列。之后再垂直排列右侧270px的分栏容器。书写代码见图 [](https://yjyj.net/wp-content/uploads/2016/08/1470909789-4249-2329615-7c1dad0148a5283d.png) 隐藏显示 Bootstrap框架利用css3的媒体查询为我们准备了一个“响应式工具”，利用这些预定义的类，我们可以在不同设备上呈现同一个页面中的不同内容。为了区别于官方手册，我这里不罗列他的类型列表，只举个列子说明。（官方建议只考虑手机设备） .visible-xs-block 在手机设备中显示为块级元素。 .visible-xs-inline 在手机设备中显示为内联元素 .visible-xs-inline-block 在手机设备中显示为行内块元素。 .hidden-xs 在手机设备中不显示 其他 剩下几个和栅格单元有关的类，比较简单。看手册案例可以秒懂，不罗嗦了。 左右分栏位置互换 .col-md-push- 栅格列向右移动 .col-md-pull- 栅格列向左移动 （*号代表小于12的数值，这个由你根据页面效果自己定义。） 栅格列偏移，只能向右侧偏移 .col-md-offset-* （*号代表小于12的数值，这个由你根据页面效果自己定义。） ## 原文地址：[http://www.wangyongfeng.cn/article/119](http://www.wangyongfeng.cn/article/119)   文／江泽爱（简书作者） 原文链接：http://www.jianshu.com/p/50d794c1bc0c 著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。 ## 延伸问答与排错指南 (FAQ) ### Bootstrap 栅格系统到底怎么理解？ 可以把它看成一个会随屏幕变化的 12 列等宽表格。页面内容放进 col-* 单元格里，通过不同断点的类名控制宽度、合并和拆分，从而实现跨设备布局。 ### Bootstrap 默认列间距为什么是 30px？ 因为每个列单元格左右各有 15px 的 padding，相邻两列叠加后就是 30px。若要调整间距，通常不要直接改 col 类本身，而是通过子元素的负 margin 等方式去覆盖。 ### 手机端显示时为什么会自动上下排列？ 当屏幕变窄时，栅格列会按响应式规则重新排布，超出一行的列会向下浮动堆叠。这样能保证在小屏上仍保持可读性，常见做法是按 xs、sm、md、lg 设定不同宽度。 --- 更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)