Bootstrap 网格基础


Bootstrap 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

我们也可以根据自己的需要,定义列数:

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

Bootstrap 的网格系统是响应式的,列会根据屏幕大小自动重新排列。


网格类

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

  • xs 超小设备(手机,小于 768px)
  • sm 小型设备(平板电脑,768px 起)
  • md 中型设备(台式电脑,992px 起)
  • lg 大型设备(大台式电脑,1200px 起)

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


Bootstrap 网格的基本结构

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

<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 class="row">)。然后, 添加是需要的列(.col-*-* 类中设置)。请注意 .col-*-* 中的数字每行加起来应该是 12。

下面我们收集了一些 Bootstrap 网格布局的示例。



创建三个相等宽度的列

.col-sm-4
.col-sm-4
.col-sm-4

下面的示例显示了如何从平板电脑开始获得三个等宽列,并扩展到大型台式机。在移动电话或小于768px宽的屏幕上,列将自动堆叠:

实例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
亲自试一试 »

二个不等宽的列

.col-sm-4
.col-sm-8

以下示例显示了如何获得两个不同宽度的列,从平板电脑开始,扩展到大型台式机:

实例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
亲自试一试 »

提示: 在本教程的后面部分,您将了解有关 Bootstrap 网格的更多信息。