Bootstrap 网格实例

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

---

三个等宽列

下面的实例显示了如何从平板电脑开始设置三个等宽列，并且样式兼容大型台式机。而在手机上，这些列将自动堆叠:

实例

<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>

---

三个不等宽列

下面的例子展示了如何从平板电脑开始设置三种不同宽度的列，并且样式兼容大型台式机:

实例

<div class="row">
 <div class="col-sm-3">.col-sm-3</div>
 <div class="col-sm-6">.col-sm-6</div>
 <div class="col-sm-3">.col-sm-3</div>
</div>

---

两个不等宽列

下面的例子展示了如何从平板电脑开始设置两个不同宽度的列，并且样式兼容到大屏幕桌面:

实例

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-8">.col-sm-8</div>
</div>

---

无间隙网格

使用 .row-no-gutters 样式来删除行与列之间的间隙:

实例

<div class="row row-no-gutters">
 <div class="col-sm-3">.col-sm-3</div>
 <div class="col-sm-6">.col-sm-6</div>
 <div class="col-sm-3">.col-sm-3</div>
</div>

---

具有两个嵌套列的两列

下面的实例显示了如何从平板电脑开始设置两列并兼容到大屏幕桌面，在较大的列中再添加两列（宽度相等）（在手机上，这些列及其嵌套列将堆叠）:

实例

<div class="row">
 <div class="col-sm-8">
  .col-sm-8
  <div class="row">
   <div class="col-sm-6">.col-sm-6</div>
   <div class="col-sm-6">.col-sm-6</div>
  </div>
 </div>
 <div class="col-sm-4">.col-sm-4</div>
</div>

---

手机与电脑自适应布局

Bootstrap 网格系统有 4 种样式类：xs（手机）、sm（平板电脑）、md（台式机）和lg（大型台式机）。这些类可以组合起来创建更具动态性和灵活性的布局。

提示：每个类都会向上兼容，因此如果希望为 xs 和 sm 设置相同的宽度，只需指定 xs 即可。

实例

<div class="row">
 <div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
 <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
 <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
 <div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
 <div class="col-xs-6">.col-xs-6</div>
 <div class="col-xs-6">.col-xs-6</div>
</div>

---

手机、平板与电脑自适应布局

实例

<div class="row">
 <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
 <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
 <div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
 <div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>

---

清除浮动

清除特定断点处的浮动（使用 .clearfix 类），以处理内容不均匀的奇怪布局:

实例

<div class="row">
 <div class="col-xs-6 col-sm-3">
  Column 1
  <br>
  Resize the browser window to see the effect.
 </div>
 <div class="col-xs-6 col-sm-3">Column 2</div>
 <!-- Add clearfix for only the required viewport -->
 <div class="clearfix visible-xs"></div>
 <div class="col-xs-6 col-sm-3">Column 3</div>
 <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

---

偏移列

使用 .col-md-offset-* 样式来将列向右移动。这些样式会增加 * 列的左边距:

实例

<div class="row">
 <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
 <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>

---

Push 和 Pull - 改变列的顺序

要改变列的顺序，可以使用 .col-md-push- 和 .col-md-pull- 样式:

实例

<div class="row">
 <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
 <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>