bootstrap 栅格系统 自动隐藏

bootstrap 栅格系统 自动隐藏

Container

顾名思义Container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值,这样container与浏览器窗口之间就存在一定距离。

 

2 row

要注意的是:row会清除内边距的效果,但不会清除内边距,col要放在row里,row要放在container里

row指container的一行,每行理想状态包含12个col,这些col在不同屏幕大小时行为不同,见下图:

 

你也可以给一个div设置两个col-  class,以便适应不同的屏幕。值得一提的是,row的左右各有-15px margin值,被当作为row的 div 被约束在 container内边界与粉色区域重叠,但没超过。这负的15px margin 值把 row的推出了container 的 15px padding,并与之重叠,本质上讲就是负出去。

切记永远不要在container外用row,这样做是无效的。

3 col-

col在不同屏幕下行为不同,这在上面已经说过了。

列(col)现在有15px的padding了,如下图中黄颜色部分。Container的正padding值造成了15px的留空,row用负margin值反的延伸回去,所以现在col的padding值与container的padding重叠,永远不要在row外使用col,在row外使用col是无效的。

4 嵌套

当你设置了container,row,column后,你可以在column内再创建新的栅格系统。你在列(col)内添加新的行(row)时不需再嵌container了。这个技巧在于列(col)扮演了container一样的角色,列也有15px的padding值,它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了。

5 隐藏显示

  col-*-*
                第一个参数  xs sm md lg
                xs 带这个标识的样式  在超小屏设备以上都生效
                sm 带这个标识的样式  在小屏设备以上都生效
                md 带这个标识的样式  在中屏设备以上都生效
                lg 带这个标识的样式  在大屏设备生效
                第二个参数  1-12  默认分成12等份

 

 超小屏幕
手机 (<768px)
小屏幕
平板 (≥768px)
中等屏幕
桌面 (≥992px)
大屏幕
桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

类组CSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。

原文链接 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值