列平移
使用 .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 上开源。