HTML栅格布局container,04栅格布局.html

栅格布局

Bootstrap栅格布局

Bootstrap架构内置了一套网格的布局系统，而且是响应式的网格布局系统，网格布局实际上就是把网页分成一定数量的栏数或者叫做网格，Bootstrap的网格系统就是把网页分成12栏，如果你想让网页中的某一元素占用一定数量的栏数的宽度，你可以在该元素上添加一个特定的类，col-*这样的类。

栅格特定的类

包括了.col,.col-sm,.col-md,.col-lg,.col-xl,.col-*,.col-sm-*,.col-md-*,.col-lg-*,.col-xl-*

使用步骤

1. 步骤1：为需要栅格布局的内容外侧添加div标签包裹，并设置class类为container或container-fulid
2. 步骤2：为所要显示为一行的内容添加div标签包裹，并设置类为row
3. 步骤3：为所要显示为一栏的内容添加div标签包裹，并设置类为col-*

一键复制

编辑

Web IDE

原始数据

按行查看

历史