3、栅格偏移 布局中的一个特产

理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:

  • offset:左外边距(margin-left);
  • pull:右位移(right);
  • push:左位移(left)。

其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):

  • xs:col-xs-offset-0 ~ col-xs-offset-12
  • sm:col-sm-offset-0 ~ col-sm-offset-12
  • md:col-md-offset-0 ~ col-md-offset-12
  • lg:col-lg-offset-0 ~ col-lg-offset-12

<label class="col-sm-2 col-md-offset-1 control-label">返利啦</label>

时间: 2024-10-06 08:22:07

3、栅格偏移 布局中的一个特产的相关文章

解决div布局中第一个div的margin-top在浏览器中显示无效果问题。

原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/ 垂直外边距合并问题 别被上面这个名词给吓倒了,简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.你可以查看W3Shool CSS外边距合并了解这个基本知识. 实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下

030在布局中实现一个模态对话框

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @end ViewController.m 1 #import "ViewController.h" 2 #import "ModalDialog.h" 3 4 @interface ViewController () 5 - (void)layoutUI;

负边距在布局中的使用

负边距在布局中的使用 负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现 当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top.left后元素还占据原来位置不同 当margin-bottom.margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移.右移 看几个应用场景 绝对定位元素 当元素被设置为

【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)

[翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .

栅格系统布局

Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 这是Bootstrap中文文档中提供的栅格系统的定义,大概是什么意思呢,响应式大概是什么意思呢,就是说自动根据屏幕显示窗口的大小来进行布局. 将“行”的class设为“row”,一行分为12列,来进行布局.前提是都要包含在“container”这个容器中进行设置. 我们可以来写一段代码: <div class="container">

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉<meta name="msapplication-tap-highlight" content="no">1.关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />2.禁止文本缩放h

结构体中最后一个成员为[0]或[1]长度数组(柔性数组成员)的用法

结构体中最后一个成员为[0]长度数组的用法:这是个广泛使用的常见技巧,常用来构成缓冲区.比起指针,用空数组有这样的优势:(1).不需要初始化,数组名直接就是所在的偏移:(2).不占任何空间,指针需要占用int长度空间,空数组不占任何空间.“这个数组不占用任何内存”,意味着这样的结构节省空间:“该数组的内存地址就和它后面的元素地址相同”,意味着无需初始化,数组名就是后面元素的地址,直接就能当指针使用. 这样的写法最适合制作动态buffer,因为可以这样分配空间malloc(sizeof(struc

如何在RCP程序中添加一个banner栏

前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个banner栏,研究了很久才搞定.代码是基于eclipse4.3.2的. 先看一下效果预览: 为了添加一个banner栏,我们必须重写RCP程序最外层的layout类,即TrimmedPartLayout.java.这个layout类是用来控制menu,toolbar等最基本的layout布局的.我们写一个