【8】了解Bootstrap栅格系统基础案例(3)_html/css_WEB-ITnose
程序员文章站
2022-05-19 12:20:19
...
这次我们来说下列偏移:
列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
废话不多说,直接上代码
Bootstrap-Template-05 案例:列偏移.col-md-offset-*
.col-md-4.col-md-4.col-md-4.col-md-4.col-md-4 .col-md-offset-4.col-md-3.col-md-3.col-md-3.col-md-3.col-md-3 .col-md-offset-3.col-md-3 .col-md-offset-3.col-md-6 .col-md-offset-3
再来看看效果图吧,因为我们这里只是做了一个中等屏幕的效果,不用再做拉伸什么的,所以大家将就的看看吧。
在这里我做了2个参考行,分别是第一行和第三行,这样可以很明显的了解列偏移是多么的简单,很解释的意思是一样的。
推荐阅读
-
【7】了解Bootstrap栅格系统基础案例(2)_html/css_WEB-ITnose
-
【10】了解Bootstrap栅格系统基础案例(5)_html/css_WEB-ITnose
-
【8】了解Bootstrap栅格系统基础案例(3)_html/css_WEB-ITnose
-
【8】了解Bootstrap栅格系统基础案例(3)_html/css_WEB-ITnose
-
【10】了解Bootstrap栅格系统基础案例(5)_html/css_WEB-ITnose
-
【7】了解Bootstrap栅格系统基础案例(2)_html/css_WEB-ITnose
-
ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统_html/css_WEB-ITnose
-
【5】了解Bootstrap预置的栅格系统_html/css_WEB-ITnose
-
ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统_html/css_WEB-ITnose
-
【5】了解Bootstrap预置的栅格系统_html/css_WEB-ITnose