目录1、简介2、栅格选项3、列偏移4、嵌套列5、列排序
1、简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
2、栅格选项bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
3、列偏移使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
4、嵌套列为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。 5、列排序通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
&%@ page language="java" pageEncoding="UTF-8"%&
String path = request.getContextPath();
&!DOCTYPE html&
&html lang="zh-cn"&
&title&栅格&/title&
&meta content="IE=edge" http-equiv="X-UA-Compatible"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8" /&
&meta http-equiv="Content-Language" content="zh-cn" /&
&meta name="author" content="" /&
&meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" /&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="This is my page"&
&jsp:include page="/demo/base/js_bootstrap.jsp" /&
&style type="text/css"&
.show-grid [class ^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
&script type="text/javascript"&
$(function(){
&b&col-lg-*用法&/b&
&div class="row show-grid"&
&div class="col-lg-8"&.col-lg-8&/div&
&div class="col-lg-4"&.col-lg-4&/div&
&b&col-md-*用法&/b&
&div class="row show-grid"&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="row show-grid"&
&div class="col-md-8"&.col-md-8&/div&
&div class="col-md-4"&.col-md-4&/div&
&b&col-sm-*用法&/b&
&div class="row show-grid"&
&div class="col-sm-8"&.col-sm-8&/div&
&div class="col-sm-4"&.col-sm-4&/div&
&b&col-xs-*用法&/b&
&div class="row show-grid"&
&div class="col-xs-8"&.col-xs-8&/div&
&div class="col-xs-4"&.col-xs-4&/div&
&b&列偏移: col-md-offset-*&/b&
&div class="row show-grid"&
&div class="col-md-4"&.col-md-4&/div&
&div class="col-md-4 col-md-offset-4"&.col-md-4 .col-md-offset-4&/div&
&div class="row show-grid"&
&div class="col-md-3 col-md-offset-3"&.col-md-3 .col-md-offset-3&/div&
&div class="col-md-3 col-md-offset-3"&.col-md-3 .col-md-offset-3&/div&
&div class="row show-grid"&
&div class="col-md-6 col-md-offset-3"&.col-md-6 .col-md-offset-3&/div&
&b&嵌套列: 嵌套row所包含的列加起来应该等于12&/b&
&div class="row show-grid"&
&div class="col-md-9"&
Level 1: .col-md-9
&div class="row show-grid"&
&div class="col-md-6"&Level 2: .col-md-6&/div&
&div class="col-md-6"&Level 2: .col-md-6&/div&
&b&列排序: .col-md-push-*和.col-md-pull-*&/b&
&div class="row show-grid"&
&div class="col-md-9 col-md-push-3"&.col-md-9 .col-md-push-3&/div&
&div class="col-md-3 col-md-pull-9"&.col-md-3 .col-md-pull-9&/div&
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】。
如果，您希望更容易地发现我的新博客，不妨点击一下左下角的【关注我】。
如果，您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是【】。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
阅读(...) 评论()还没有账号？
其他方式登录
滑动完成验证
重发验证码
手机短信验证码已发送，请查收！
你有一个红包等你领取!Bootstrap布局之栅格系统详解
Bootstrap布局之栅格系统详解
前些天学习了bootstrap,把其中的栅格系统整理出来，如有错误，欢迎指正。
概要，栅格系统针对pc,pad,移动端开发出响应式web页面，根据不同屏幕分辨率有针对不同的解决方法。
(0.1, 屏幕设备尺寸大于1200px 选择col-lg&
(0.2. 屏幕设备尺寸在970px到1200px 选择col-md&
(0.3. 屏幕设备尺寸在768px到970px 选择col-sm&
(0.4. 屏幕设备尺寸小于768px 选择col-xs
1.栅格系统把页面分为12栏（最多12栏），如下：&
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no"&
&title&栅格系统&/title&
&link rel="stylesheet" href="library/bootstrap.min.css"&
height: 50
background:
&div class="container a"&
&div class="row"&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="col-md-1 a"&1&/div&
&div class="row"&
&div class="col-md-3 a"&3&/div&
&div class="col-md-9 a"&9&/div&
&script src="library/jq.js"&&/script&
&script src="library/bootstrap.min.js"&&/script&
(2.1,& col-md-1为一栏，合计12栏布满一个"横排"，md后尾随的数字为分配的栏数，（col-lg,col-sm,col-xs同理）
3.在不同屏幕分辨率的设备下，所呈现的页面为对应的"栅格式栏数页面"，从而实现响应式布局,如下代码：
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no"&
&title&栅格系统&/title&
&link rel="stylesheet" href="library/bootstrap.min.css"&
height: 50
background:
&div class="container"&
&div class="row"&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a"&1&/div&
&script src="library/jq.js"&&/script&
&script src="library/bootstrap.min.js"&&/script&
（3.1，上图代码表示在屏幕设备尺寸大于1200px时，一个横排有四大栏，一个大栏有三小栏，小栏共计12栏，&
（3.2，表示在屏幕设备尺寸在970px到1200px时（可以先看为浏览器缩小至这个阶段时），一个横排有三大栏，一个大栏有四小栏，小栏共计12栏，&
（3.2，表示在屏幕设备尺寸在768px到970px时（可以先看为浏览器缩小至这个阶段时），一个横排有二大栏，一个大栏有六小栏，小栏共计12栏，&
（3.2，表示在屏幕设备尺寸小于768px时（可以先看为浏览器缩小至这个阶段时），一个横排有一大栏，一个大栏有十二小栏，小栏共计12栏，
4、栅格系统里的列偏移，嵌套和交换位置
（4.1，列偏移&&&&&&&
&div class="row"&
&div class="col-md-8 a"&8&/div&
&div class="col-md-3 col-md-offset-1 a"&3&/div&
&!-- 列向右偏移一位 --&
（4.2，嵌套&&&
&div class="row"&
&!-- 嵌套 --&
&div class="col-md-9 a" style="padding:0;"&
&div class="col-md-4 a"&&/div&
&div class="col-md-4 a"&&/div&
&div class="col-md-4 a"&&/div&
&div class="col-md-3 a"&3&/div&
（4.3，交换位置&
&div class="row"&
&!-- 交换位置 --&
&div class="col-md-9 col-md-push-3 a"&9&/div&
&!-- push,向右移 --&
&div class="col-md-3 col-md-pull-9 a"&3&/div&
&!-- pull，向左移 --&
如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程
本文都是通过最简单的案例，来剖析案例中涉及到的布局要点，希望对大家的学习有所帮助。
Copyright & 2016 phpStudytips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算
来源：博客园
bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时

1 &div class="row" &
&!--row a--&
2
&div class="col-xs-12 col-lg-6 col-lg-offset-3"&
3
&div class="row"& &!-- row b--&
4
&div class="col-xs-12"&
5
&/div&
7
&!--row b--&
8
&/div&
9 &/div&
&!-- row a --&

此时rowb的宽度计算会出现bug 在手机屏幕上将溢出解决方案很简单 对row a设置样式overflow:(事先声明,这种解决方式有细微缺陷,但是基本不影响,而且简单实用)此时对rowb 的设置width:100%; (在浏览器f12的盒子模型里可以看到width确实是对的(与父元素的width保持一致),但给它一个边框会发现视觉上真实的宽度是明显不够的(和父元素的width不等,非常诡异))或者给rowb加一个父级元素container都是错误的做法,(此时手机屏幕上的不再溢出,在大屏幕上将会溢出)为什么会有这个问题,可以去f12看row和col的盒子模型,因为bootstrap的col 默认有gutter(即col有左右的padding分别15px)如果觉得这种默认不好,我们可以自己制定规则覆盖默认定义样式如下

1 .row.no_gutter [class^="col-"],.row.no_gutter [class*="col-"]{
2
padding-right:0px;
3
padding-left:0px;
4 }

然后需要嵌套列时,只需要将此嵌套的行加一个样式类就ok了,like this:

1 &div class="row" &
&!--row a--&
2
&div class="col-xs-12 col-lg-6 col-lg-offset-3"&
3
&div class="row no_gutter"& &!-- row b--&
4
&div class="col-xs-12"&
5
&/div&
7
row b is end --&
8
&/div&
9 &/div&
&!-- row a is end --&

或者也可以去改bootstrap源码,对于专业的前端工程师来说,毫无疑问本地是有一套比如npm-bower-grunt的编译环境的,此时 运行
bower install bootstrap 然后在项目下 运行
npm install 
然后在其less文件夹下找variables.less文件 更改
@grid-gutter-width:30 的值即可(想再详细具体一点,精确到每个不同分辨率的设备的gutter请参照/css/ (侧边栏less mixin和变量栏))
然后 运行 grunt dist 就能在dist文件夹下取编译后的版本了.
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动