Bootstrap 行列
Bootstrap 的网格系统有 12 个单位，称为列，可用于在视口中水平布局内容。
12 个单位网格（而不是 10,16 等）的原因是 12 平均分为 6 个（一半），4 个（四分之一）和 3 个（三分之一）。这使得适应各种布局变得更加容易。Bootstrap 的网格列由不同的 col-{breakpoint}-{units} CSS 类标识。了解有关视口宽度和断点的更多信息（AKA 层）
因此，例如，col-md-3 表示在介质（md）宽度视口中占据 12 个单元中的 3 个（或 25％）的列。要在布局中使用列宽，只需在 HTML 标记中使用适当的 col-{breakpoint}-{units} 类。
<div class="col-{breakpoint}-{units}">
列宽是流体（不是固定宽度），因此列消耗其容器的百分比。
Bootstrap 3 中的列单位
col-*-1：1 of 12（8.33333333％宽度）col-*-2：12 of 12（16.66666667％宽度）col-*-3：3 of 12（25％宽度）col-*-4：12 of 12（33.3333333％宽度）col-*-5：5 of 12（41.66666667％宽度）col-*-6：6 of 12（50％宽度）col-*-7：7 of 12（58.33333333％宽度）col-*-8：12 of 12（66.66666667％宽度）col-*-9：9 of 12（75％宽度）col-*-10：10 of 12（83.33333333％宽度）col-*-11：11 of 12（91.66666667％宽度）col-*-12：12 of 12（100％宽度）
Bootstrap 行
Bootstrap .row 类用于包含列。列应始终放在行中，并且行应始终放在 Container（container 或 container-fluid）内。Row 使用负边距（-15px）来确保列的内容与浏览器边缘之间的适当间距。行用于水平分组列。
<div class="container">
<div class="row">
<!-- one more columns -->
<div class="col-{breakpoint}-{units}">..</div>
</div>
</div>
列将从左到右水平填充 .row，并将每 12 个列单位换行到一个新行。因此，你可以使用 .rows 创建水平中断，也可以在单个 .row 元素中添加 12 个以上的列单元，以使列在视口中垂直向下包裹 （或堆叠）。
当使用列包装（在 .row 中超过 12 个单位）时，你需要使用响应式重置（或 clearfixes） 来确保均匀包裹不均匀的列内容。当列的内容高度不同时，这是必不可少的。