Bootstrap3实用教程
2.2.3 列平移
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

布局实例

工作原理

列平移

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验