twitter-bootstrap 引导行和列

示例

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网格如何工作（中）