【bootstrap】栅格布局和自动隐藏或者显示 |
您所在的位置:网站首页 › 手机屏幕小程序怎么隐藏 › 【bootstrap】栅格布局和自动隐藏或者显示 |
欢迎来前群里探讨技术QQ:454891743
查看了多个大神的博客然后加上了自己的一些理解综合了下: 1 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等份 超小屏幕 手机 ( |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |