Bootstrap Grids（网格）

Bootstrap 网格系统

Bootstrap 的网格系统可以将页面最多划分为 12 列。

如果不想将 12 列都单独使用，可以将这些列组合在一起以形成更宽的列:

span 1

span 4

span 8

span 6

span 12

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

Grid Classes

Bootstrap 网格系统有四种样式类:

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

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

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 网格布局的实例。

3 个等宽列

.col-sm-4

下面的实例显示了从平板电脑开始设置 3 个等宽列，然后切换到大型台式机的屏幕大小，列都会自动拉伸。在手机或小于 768px 宽的屏幕上，列将自动堆叠:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <h2>Hello World!</h2>
  <p>调整浏览器窗口的大小以查看效果。</p>
  <p>当屏幕宽度小于 768px 时，这些列将自动堆叠在彼此的顶部。</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>
</body>
</html>

运行一下

两个不等宽列

.col-sm-4

.col-sm-8

下面的例子展示了如何从平板电脑开始设置两个不同宽度的列，再切换到大型桌面屏幕查看:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <h2>Hello World!</h2>
  <p>调整浏览器窗口的大小以查看效果。</p>
  <p>当屏幕宽度小于 768px 时，这些列将自动堆叠在彼此的顶部。</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>
</div>
</body>
</html>