bootstrap----网格系统
Posted yanxiaoge
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap----网格系统相关的知识,希望对你有一定的参考价值。
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
- 行必须放置在
.container
class 内,以便获得适当的对齐(alignment)和内边距(padding) - 使用行来创建列的水平组
- 内容应该放置在列内,且唯有列可以是行的直接子元素
- 预定义的网格类,比如
.row
和.col-xs-4
,可用于快速创建网格布局。LESS 混合类可用于更多语义布局 - 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过
.rows
上的外边距(margin)取负,表示第一列和最后一列的行偏移 - 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个
.col-xs-4
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
以上是关于bootstrap----网格系统的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Angular Flex Layout 与 Bootstrap 4 网格系统进行比较?