Bootstrap 网格实例


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


三个等宽列

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

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

实例

<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-3
.col-sm-6
.col-sm-3

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

实例

<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>
亲自试一试 »


两个不同宽度的列

.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>
亲自试一试 »

没有装订线

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

使用 .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 网格系统有四类: xs (手机), sm (平板电脑), md (台式机), and 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>
亲自试一试 »

提示: 记住一行的网格列加起来应该是 12。不仅如此,无论视口(viewport)如何,列都将堆叠。


混合: 移动设备、平板电脑和台式机

实例

<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>
  <!-- 仅为所需的视口添加 clearfix -->
  <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>
亲自试一试 »

推拉 - 更改列顺序

更改具有 .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>
亲自试一试 »