Bootstrap（二）——Grid栅格布局

一、栅格系统（布局）

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列

把Bootstrap中的栅格系统叫做布局。

它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后将内容放入到创建好的布局当中

---

1.1 基本结构

一行平均分为12个列
.col-1~12代表列占有行的十二分之几份

tip:需要保证所有col加起来总值为12

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

container：bootstrap容器（详情查看 Bootstrap（一）——简介、布局容器和工具类使用）
row：列，列里面用来嵌套行
col：行

示例：col-x

<style>
.zdy-c {
    height: 100px;
}
</style>

<div class = "row">
    <div class = "col-12 zdy-c bg-danger"></div>
</div>
<div class = "row">
    <div class = "col-6 zdy-c bg-success"></div>
</div>
<div class = "row">
    <div class = "col-4 zdy-c bg-warning"></div>
</div>
<div class = "row">
    <div class = "col-2 zdy-c bg-info"></div>
</div>
<div class = "row">
    <div class = "col-1 zdy-c bg-primary"></div>
</div>

---

1.2 偏移列

.col-md-offset-*：会把一个列的左外边距（margin）增加 *列（1 <= * <= 11）

• 元素在自己的原位置像右偏移几份
• 超出一行，列会换行

<div class="container bg-dark box">
    <div class="row">
        <div class="col-2 bg-primary offset-3">3份</div>
        <div class="col-2 bg-warning">3份</div>
        <div class="col-2 bg-danger">3分</div>
    </div>
    <div class="row">
        <div class="col-1 bg-warning">1</div>
        <div class="col-1 offset-2 bg-danger">2</div>
        <div class="col-1 offset-3 bg-primary">3</div>
        <div class="col-1 offset-4 bg-light">4</div>
    </div>
</div>