Bootstrap 网格
-
网格系统
Bootstrap 的网格系统是使用 flexbox 构建的,并且整个页面最多允许 12 列。如果不想单独使用全部 12 列,则可以将这些列组合在一起以创建更宽的列:span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 4span 4span 4span 4span 8span 6span 6span 12网格系统是响应式的,列将根据屏幕大小自动重新排列。确保总和不超过12个(不需要使用所有12个可用列)。 -
网格类别
Bootstrap 网格系统具有五类:- .col-(超小型设备-屏幕宽度小于576px)
- .col-sm-(小型设备-屏幕宽度等于或大于576px)
- .col-md-(中等设备-屏幕宽度等于或大于768px)
- .col-lg-(大型设备-屏幕宽度等于或大于992px)
- .col-xl-(xlarge设备-屏幕宽度等于或大于1200px)
可以将上述类组合在一起以创建更多动态和灵活的布局。提示:每个类都按比例增加,因此,如果您希望为 sm 和 md 设置相同的宽度,则只需指定 sm。
-
网格的基本结构
下面示例演示了 Bootstrap 网格的基本结构:第一个示例:创建一行(<div class="row">)。 然后,添加所需的列数(带有适当的 .col-*-* 类的标签)。 第一个星号(*)代表响应度:sm,md,lg 或 xl,而第二个星号则代表一个数字,每行总计为 12。第二个示例:让引导程序处理布局,而不是给每个 col 添加数字,以创建相等宽度的列:两个 "col" 元素=每个 col 的宽度为 50%。 三个列=每个列的宽度为 33.33%。 四个 cols = 25% 的宽度等。您还可以使用 .col-sm | md | lg | xl 使列具有响应性。 -
-
响应列
.col-sm-3.col-sm-3.col-sm-3.col-sm-3以下示例显示了如何创建四个等宽列,这些列从平板电脑开始并扩展到超大型桌面。 在宽度 <576px 的手机或屏幕上,这些列将自动堆叠在一起: -
-