列平移
使用 .col-md-offset-* 类，可以将列向右侧平移，* 指定要平移的列数。平移的本质，是为元素增加 * 列的左外边距（margin-left）。如，.col-md-offset-4 类将 .col-md-4 元素向右侧平移 4个列（column）的宽度，也就是为它增加 4 列的左外边距。如：
<div class="row"><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><div class="row"><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><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div>
上述代码的运行结果如图 2‑5所示：
图2-5 列平移
列平移的一个常见应用场景，就是实现列的对齐。比如，在一个横向布局的用户登录表单中，最后一行的登录按钮需要与第二列对齐，就可以通过列平移来实现：
<form class="form-horizontal"><div class="form-group"><label for="inputUser" class="col-sm-2 control-label">用户名</label><div class="col-sm-10"><input type="text" class="form-control" id="inputUser"></div></div><div class="form-group"><label for="password3" class="col-sm-2 control-label">密码</label><div class="col-sm-10"><input type="password" class="form-control" id="password3"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-success">登 录</button></div></div></form>
上述表单第一列的宽度由栅格类 .col-sm-2 定义，表示它占用 2 列宽度。因此，登录按钮的列，就要使用对应的 .col-sm-offset-2 类来向右平移 2 列。运行结果如图 2‑6所示：
图2-6 列平移实例
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。