Bootstrap3 栅格系统之列平移

列平移

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

Bootstrap3 栅格系统之列平移相关推荐

Bootstrap3 栅格系统之列排序
列排序 Bootstrap 栅格系统中一个非常人性化的特性,就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序.push 将元素向右推动 * 指定的列数,pul ...
Bootstrap3 栅格系统之列嵌套
列嵌套 Bootstrap栅格系统也支持列嵌套,即在一个列中嵌套一个或多个行.被嵌套的行依然遵守最大 12 列的规则,即一行中所包含的总列数不能大于12(当然,也没有要求你必须占满12列),如果大于 ...
Bootstrap3栅格系统布局实例
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先.使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局. 先看一个简单实例,来加深对移动设备优先的理 ...
Bootstrap3 栅格系统
栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 Bootstrap栅格系统通过一系列的行 ...
bootstrap栅格系统自定义列
bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: <span style="font-size: ...
Bootstrap3 栅格系统-简介
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
Bootstrap3 栅格系统-栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...
Bootstrap3 栅格系统之自定义mixin和变量
mixin和变量除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin,通过自定义这些变量和 mixin,可以生成简单.语义化的布局. 1.变量通过变量来定 ...

Bootstrap3 栅格系统之列平移

列平移

Bootstrap3 栅格系统之列平移相关推荐

最新文章

热门文章