首页 > 网站 > WEB开发 > 正文

5.列偏移

2024-04-27 15:03:35
字体:
来源:转载
供稿:网友

一、列偏移

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6">第1行第1列</div> <div class="col-lg-3 col-md-4 col-sm-6">第1行第2列</div> <div class="col-lg-3 col-md-4 col-sm-6">第1行第3列</div> <div class="col-lg-3 col-md-4 col-sm-6">第1行第4列</div> </div> <div class="row"> <div class="col-lg-3 col-lg-offset-3">第2行第1列</div> </div> </div>

col-lg-offset-3 表示偏移 offset 表示向右偏移 数字 表示向右偏移的格子数,数字若大于12,则没有效果

二、列排序 col-lg-push-6 列往右走6个格子,不能超过12个,超过12不起作用 col-lg-pull-6 列往左走6个格子,不能超过12个 可以利用上面的语句将div用于调换位置。

三、列偏移与列排序的区别: 1.列偏移只能往右走,而列排序既可以往右走,也可以往左走; 2.列偏移在有多行的情况下,若偏移格子加上自身及自身位置的格子总数超过12,则会另起一行,而列排序则不会,仍在一行上。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表