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