Bootstrap 3的栅格系统

Bootstrap 3的栅格(grid)系统以浏览器的屏幕宽度为指标，从小到大分为4级：xs, sm, md, lg (extra small, small, medium, large). 4个级别之间的宽度分隔点（即breakpoint size）分别是768px, 992px和1200px。例如，当屏幕宽度为1000px（像素）时，使用md标准，800px使用sm标准，

假设我们需要在一行上从左到右顺序放置A,B,C共3个元素，宽度比为1:2:1，由于栅格系统将每行分为12列，不难算出这3个元素依次应占据3，6和3列，下面是测试代码：

$ meteor create grids
$ cd grids
$ cat << EOF > grids.html
<head>
  <title>Bootstrap Grids</title>
</head>

<body>
  <h1>Bootstrap Grid System Demo</h1>
  {{> getDim}}
  <hr>

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

  </div>
</body>
EOF

<template name="getDim">
  <div> Browser window width: {{bro_wid}} </div>
  <div> Browser window height: {{bro_hei}} </div>
  <div> Screen width: {{scr_wid}} </div>
  <div> Screen height: {{scr_hei}} </div>
</template>

$ cat << EOF > grids.css
.col-sm-3 {
  background-color: #ccc;
}

.col-sm-6 {
  background-color: #cf0;
}

$ cat << EOF > grids.js
if (Meteor.isClient) {
  Session.setDefault("bro_wid", $(window).width());
  Session.setDefault("bro_hei", $(window).height());
  Session.setDefault("scr_wid", screen.width);
  Session.setDefault("scr_hei", screen.height);

  Meteor.startup(function () {
    $(window).resize(function(e) {
      Session.set("bro_wid", $(window).width());
      Session.set("bro_hei", $(window).height());
      Session.set("scr_wid", screen.width);
      Session.set("scr_hei", screen.height);
    });
  });

  Template.getDim.helpers({
    bro_wid: function () {
      return Session.get("bro_wid");
    },
    bro_hei: function () {
      return Session.get("bro_hei");
    },
    scr_wid: function () {
      return Session.get("scr_wid");
    },
    scr_hei: function () {
      return Session.get("scr_hei");
    }
  });
}

浏览器初始宽度为1284px，属于lg，用慢慢拖动鼠标减小窗口宽度，这时行元素 (.row) 两端的页边距(padding)不断缩小，当窗口宽度低于1200px时，此行中每列 (.col) 元素的宽度整体减小了一级，同时行的边距恢复初始值，继续减小窗口宽度，边距持续减小，直到992像素时行中各列元素宽度减小，边距恢复；当宽度低于768像素时，行中的3个列元素改为纵向排列，即stack方式。

结合Bootstrap 3官网文档中Grid system的说明：

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

上面我们定义的是sm，所以比它宽的md和lg都使用它的定义：3-6-3，比它小的xs没有定义，所以使用了默认的纵向排列方式。

可以用两种方法验证这一点，首先我们把html和css中的"sm"都改为"lg"，例如下面：

<div class="container">
  <div class="row">
    <div class="col-lg-3">.col-md-3</div>
    <div class="col-lg-6">.col-md-6</div>
    <div class="col-lg-3">.col-md-3</div>
  </div>
</div>

当宽度低于1200px时，列元素直接变成了纵向排列。

假设我们的需求变为：在大屏lg和中屏md上保持原有布局，即A,B,C共3个元素在同一行按1:2:1放置，在xs和sm屏上变为两行，其中A和B按照1:2放在同一行上，C放在第二行上，占屏幕宽度一半，相应地修改代码：

$ cat grids.html
...
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-xs-4">.col-md-3</div>
      <div class="col-md-6 col-xs-8">.col-md-6</div>
      <div class="col-md-3 col-xs-6">.col-md-3</div>
    </div>
  </div>
...

$ cat grids.css
...
.col-xs-4 {
  background-color: #f00;
}

.col-xs-8 {
  background-color: #0f0;
}

可以看到，在最小的屏幕上，A和B也是在同一行里的。所以对于同一个row里的col来说，超过12的col会自动放在下一行，例如上面的xs配置中，4和8已经占据了一行，所以下来C的col-xs-6就显示在下一行，且宽度为屏幕的一半，与文档所述吻合：

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Bootstrap 3的栅格系统

Published

Last Updated

Category

Tags

Contact