栅格系统中的列偏移
栅格系统可以使用.offset-md类将列向右侧偏移，主要是通过使用.offset-md-获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。其中，md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。
为了让读者更好地理解，下面通过例5-1演示列偏移的实现过程。
【例5-1】
（1）创建C:\Bootstrap\chapter05\demo08.html文件，具体代码如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7 <title>Document</title>
8 <style>
9 .row div {
10 height: 50px;
11 background-color: #eee;
12 font-size: 30px
13 }
14 </style>
15 </head>
16 <body>
17 <div class="container">
18 <!-- 偏移的份数，就是“12 - 两个盒子的份数 = 6” -->
19 <div class="row">
20 <div class="col-md-3">左侧</div>
21 <div class="col-md-3 offset-md-6">右侧</div>
22 </div>
23 </div>
24 </body>
25 </html>上述代码中，第9~13行代码定义.row下的div元素样式，其中高度50px，背景颜色为#eee；第17行代码定义布局容器.container；第19~22行代码在.container布局容器中定义.row行，第20、21行代码在第一行中定义“.col-md-3”和“.col-md-3 .offset-md-6”两列元素，其中“.offset-md-6”表示让当前列向右侧偏移，偏移量为6列。
（2）在浏览器中打开demo08.html文件，运行结果如图1所示。
图1 两端对齐
图1中，展示了两端对齐的页面效果。需要注意的是，当修改.offset-md-6中的份数6时，页面效果会发生变化。当小于6份时，右侧盒子向左侧移动，如设置份数为2，刷新浏览器，运行结果如图2所示。
图2 右侧盒子向左侧移动
当份数大于6时，右侧盒子会另起一行排列。此时，右侧盒子向右的偏移量为当前的份数。当数值大于等于12或者小于等于0时，右侧盒子在同一行左侧对齐。
（3）将第（1）步的.container容器中的内容进行替换，具体代码如下。
<!-- 如果只有一个盒子，偏移 = (12 - 8) / 2 -->
<div class="row">
<div class="col-md-8 offset-md-2">中间盒子</div>
</div>上述代码中，在.row中定义了“.col-md-8”和“.offset-md-2”两个列，“.offset-md-2”表示让当前列向右侧偏移，偏移量为2。
（4）刷新浏览器页面，运行结果如图3所示。
图3 居中对齐
图3中，展示了中间盒子居中对齐的页面效果。需要注意的是，当修改.offset-md-2中的份数2时，页面效果会发生变化，当小于2份时，中间盒子向左侧移动。例如，设置份数为0，刷新浏览器，运行结果如图4所示。
图4 中间盒子向左侧移动
通过以上操作可知，当修改的份数大于2时，中间盒子会向右侧移动；当数值大于等于12或者小于等于0时，中间盒子左侧对齐。
隐藏目录
