Bootstrap 列平移/列偏移

有些时候，我们不希望两个相邻的列紧挨在一起，就可以使用栅格系统的列平移功能。使用 .offset* 类，可以将列向右平移，* 用于指定平移的列数。比如，以下代码中的 .offset2 会导致 .span3 向右平移 2 列，.offset3 会导致 .span6 向右平移 3 列：

<div class="row">
<div class="span4">4</div>
<div class="span3 offset2">3 offset 2</div>
</div>
<div class="row">
<div class="span3 offset1">3 offset 1</div>
<div class="span3 offset2">3 offset 2</div>
</div>
<div class="row">
<div class="span6 offset3">6 offset 3</div>
</div>

上述代码的运行结果如图 2‑2所示：

图2-2 Bootstrap默认栅格系统中平移列

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

Bootstrap 列平移/列偏移相关推荐

Bootstrap3 栅格系统之列平移
列平移使用 .col-md-offset-* 类,可以将列向右侧平移,* 指定要平移的列数.平移的本质,是为元素增加 * 列的左外边距(margin-left).如,.col-md-offset-4 ...
Bootstrap 列平移
跟固定网格中一样,只需在平移的列中添加 .offset* 类即可让列向右平移.如: <div class="row-fluid"> <div class=&q ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
bootstrap table 搜索列formatter之后，单字节搜索异常
bootstrap table 搜索列formatter之后,单字节搜索异常最近发现搜索这边出现这个问题,这样搜索没有效果后面发现是因为搜索列formatter之后就会出现这个问题,那么我们就多生 ...
L1-7 矩阵列平移
矩阵列平移给定一个 n×n 的整数矩阵.对任一给定的正整数 k<n,我们将矩阵的偶数列的元素整体向下依次平移 1.--.k.1.--.k.-- 个位置,平移空出的位置用整数 x 补.你需要计算 ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
R语言dplyr包数据列重排（reorder）实战：把特定数据列移动到第一列、把特定数据列移动到最后一列、数据列多列重排、按照字母顺序重排数据列、把数据列反序
R语言dplyr包数据列重排(reorder)实战:把特定数据列移动到第一列.把特定数据列移动到最后一列.数据列多列重排.按照字母顺序重排数据列.把数据列反序目录
numpy使用[]语法索引二维numpy数组中倒数N列数据列的数值内容(accessing the last N columns in numpy array)
numpy使用[]语法索引二维numpy数组中倒数N列数据列的数值内容(accessing the last N columns in numpy array) 目录
pandas删除数据行中的重复数据行、基于dataframe所有列删除重复行、基于特定数据列或者列的作何删除重复行、删除重复行并保留重复行中的最后一行、pandas删除所有重复行（不进行数据保留）
pandas删除数据行中的重复数据行.基于dataframe所有列删除重复行.基于特定数据列或者列的作何删除重复行.删除重复行并保留重复行中的最后一行.pandas删除所有重复行(不进行数据保留) 目 ...

Bootstrap 列平移/列偏移

Bootstrap 列平移/列偏移相关推荐

最新文章

热门文章