# 充分理解bootstrap的栅格系统 - Link: https://yjyj.net/css/5523.html - Published: 2016-08-11T18:02:23+08:00 - Author: 小 虾 ⚡ 生猛大蝦编辑部 · 30 秒核心看点 * 把 Bootstrap 栅格理解成 12 列等宽表格，内容塞进 col-* 单元格即可。 * 容器负责居中承载，row 配合 col 的 15px 内边距形成默认 30px 间距。 * 手机端会自动纵向堆叠；push/pull/offset 可做左右互换和偏移。 Bootstrap手册里对自身的栅格系统讲解的比较古板。初上手的朋友读完一遍也是云里雾里， 在此说一说我个人的理解。什么是栅格系统？请参看我写的前两篇文章 网页设计中的960栅 格系统（一）和 网页设计中的960栅格系统（二） --- 抽象的表格 Bootstrap的栅格系统能自动根据当前设备的屏幕分辨率，横向分配出12个等宽的单元格，你 完全可以理解为bootstrap栅格系统就是一个具有相等宽度的12列表格，然后把具体的网页内容， 放进这些单元格里。通过前缀为col- 的class数值变换，实现单元格之间的合并和拆分。总之， 单元格数量要小于等于12 ，例如： Bootstrap的栅格布局 [⌊1470909774-7358-2329615-cd20261dc3e66a76⌉⌊1470909774-7358-2329615-cd20261dc3e66a76⌉[ 抽象的表格 单元格的承载 [⌊1470909750-7221-2329615-7af128ef36598349⌉⌊1470909750-7221-2329615-7af128ef36598349⌉[ 单元格 为了适应跨屏浏览，Bootstrap为单元格预定义了4种class ，分别对应于手机、ipad、笔记 本电脑、台式机。 Bootstrap的栅格类型 在使用这些单元格之前还要求在最外面套上两个div容器来承载，具体书写代码如下； [⌊1470909754-8312-2329615-aada99f61eb4dc75⌉⌊1470909754-8312-2329615-aada99f61eb4dc75⌉[ 容器代码 Container 负责整个屏幕的内容承载，不管里面的单元格怎么摆放，保证不会跑出这个圈子。 Row 代表一个整行（不限制高度） … 表示你的代码片段，可随便嵌套。 我们通过控制col-xx-xx的大小拆分，就能实现各种栏目的尺寸修改，当然它们之间是有一个 默认间距的存在。接下来，我们研究一下如何调整这个默认的间距。 栅格的间距 Bootstrap栅格系统采用了剧中方式布局，也就是在单元格左右各自定义了15px的padding， 从而造成相邻两列的间距为30px，这个数值不一定适合每一个网站，所以我们希望能修改它。 bootstarp栅格具有15px的间距 下面我通过一个两列布局的效果来说明，试验的前置条件；做一个固定宽度960px的div盒模型 padding=0px margin=0px，目的是对比观察bootstrap栅格系统的默认状态和尺寸。为了效果 醒目，我把高度都写死为100px。这里我用col-md- 的class来实施，效果如下： 结论： 1. bootstrap栅格在中等尺寸屏幕里的宽度为970px，随着屏幕分辨率的不同这个值也会自动调整， 这不是关注重点，重点在于保证了固定宽度且居中对齐的布局效果。 2. Container 和row 两个承载容器的padding=0 margin=0 3. col-类的内边距padding：0px 15px ，并且不能通过复写col类的样式来控制padding尺寸。 4. 只能通过定义col的子级元素来实现15px间距覆盖，在子元素的css中要添加margin：0px - 15px；最终效果如下图 显而易见，只要我们调整子元素的margin边距，就能实现左右分栏的间距大小。 [⌊1470909780-3979-2329615-705f18717c530388⌉⌊1470909780-3979-2329615-705f18717c530388⌉[ 跨屏布局 直观的讲，我们把md、lg、 xs、sm 这四个类放入一个div标签后，这个div容器就可以自动 实现不同设备的跨屏，只要记住超出的右侧容器会浮动向下排列就行。比如；一个两列布局 的页面，它在pc端可能左侧宽度达到了700px，右侧是270px，通过手机访问后（屏幕宽度只有 340px），它先显示左侧700px的分栏内容并且填充满一行340px，但这个容器里的内容会浮动 的垂直排列。之后再垂直排列右侧270px的分栏容器。书写代码见图 [⌊1470909789-4249-2329615-7c1dad0148a5283d⌉⌊1470909789-4249-2329615-7c1dad0148a5283d⌉[ 隐藏显示 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 设定不同宽度。 📚 【[前端杂烩](https://yjyj.net/category/css)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）： * [CSS 居中大全](https://yjyj.net/css/4841.html) * [神奇的css table隔行换色](https://yjyj.net/css/4305.html) * [给div来个酷炫的四角边框—linear-gradient](https://yjyj.net/css/6029.html) * [JavaScript 点击按钮一键复制指定文本内容](https://yjyj.net/css/6419.html) * 热门必读[升级一下iptables](https://yjyj.net/learn/centos/3208.html) * 热门必读[京东云路由器雅典娜 AX6600 折腾记](https://yjyj.net/learn/7810.html)