我的第一个 Bootstrap 页面

重置浏览器大小查看效果!

第一列

菜鸟教程

学的不仅是技术,更是梦想!!!

第二列

菜鸟教程..

学的不仅是技术,更是梦想!!!

第三列

菜鸟教程..

学的不仅是技术,更是梦想!!!


我的第一个 Bootstrap 页面

这是一些文本。

我的第一个 Bootstrap 页面

使用了 .container-fluid,100% 宽度,占据全部视口(viewport)的容器。


Hello World!

创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col" div,会显示四个等宽的列。

.col
.col
.col

Hello World!

重置浏览器大小查效果。

在移动设备上,即屏幕宽度小于 576px 时,四个列将会上下堆叠排版。

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

偏移列

.offset-md-4 是把.col-md-4 往右移了四列格。

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3