实现简单的类bootstrap栅格系统

实现简单的栅格系统

先看html结构，在最外层有一个容器，容器下装有行，列位于行中。

  <div class="container">
    <div class="row">
      <div class="col-md-4 red">4</div>
      <div class="col-md-4 blue">4</div>
      <div class="col-md-4 yellow">4</div>
    </div>
  </div>

盒模型设置为border-box，元素的width包括border。

* {
  box-sizing: border-box;
  text-align: center;
}

为container固定宽度。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {/*当宽度大于992px时触发*/
  .container {
    width: 970px;
  }
}

行的左右两边留出空间。

.row {
  margin-right: -15px;
  margin-left: -15px;
}

设置列元素向左浮动，按百分比计算栅格宽度。

@media (min-width: 992px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}

上色观察。

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}