Bootstrap 网格系统

Bootstrap 网格系统

Bootstrap 的网格系统允许页面上最多12列。

如果不想单独使用所有 12 列,可以将这些列组合在一起以创建更宽的列:

跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1 跨度 1
跨度 4 跨度 4 跨度 4
跨度 4 跨度 8
跨度 6 跨度 6
跨度 12

Bootstrap 的网格系统是响应式的,列会根据屏幕大小自动重新排列。在大屏幕上,将内容组织成三列可能会更好,在小屏幕上,内容项组织成一列效果会更好。

提示: 请确保每一行中列的总和等于或小于 12。


网格类

Bootstrap 网格系统有以下 4 个类:

  • xs 适用于手机 - 屏幕宽度小于 768px
  • sm 平板电脑 - 屏幕宽度等于或大于 768px
  • md 适用于小型笔记本电脑 - 屏幕宽度等于或大于 992px
  • lg 适用于笔记本电脑和台式电脑 - 屏幕宽度等于或大于 1200px

可以将上面的类组合起来创建更具动态性和灵活性的布局。

提示: 每个类都会向上扩展,因此如果您想为 xs 和 sm 设置相同的宽度,只需指定 xs 即可。


网格系统规则

Bootstrap 一些网格系统规则:

  • 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。
  • 使用行来创建水平的列组。
  • 内容需要放置在列中,并且只有列可以是行的直接子节点。
  • 预定义的类如 .row.col-sm-4 可用于快速制作网格布局。
  • 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
  • 网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。
  • 列宽以百分比为单位,因此它们始终是可变的,并且相对于其父元素自动调整大小


网格的基本结构

以下代码为 Bootstrap 网格的基本结构:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

因此,要创建所需的布局,请创建一个容器 (<div class="container">)。接下来,创建一行 (<div class="row">)。然后,添加所需的列数 (带有适当 .col-*-* 类的标记)。请注意,数字在 .col-*-* 每行加起来应该是12。


网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作:

  手机
<768px
平板电脑
>=768px
小型笔记本电脑
>=992px
笔记本电脑和台式电脑
>=1200px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
Suitable for 手机 平板电脑 小型笔记本电脑 笔记本电脑和台式电脑
网格行为 始终保持水平 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
# 列数 12 12 12 12
最大列宽 Auto ~62px ~81px ~97px
间隙宽度 30px(每列各 15px) 30px(每列各 15px) 30px(每列各 15px) 30px(每列各 15px)
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

实例

下一章将展示不同设备的网格系统示例: