Bootstrap栅格参数

来源：互联网发布：ubuntu 16.04好用吗编辑：程序博客网时间：2024/06/15 17:45

定义一行，在中等分辨率下是8:4，在超小分辨率下是6:6，在小分辨率下是3:6

<hr />

</div>

运行结果：

这是在中等分辨率下，此时它是8:4

这是在超小分辨率下，此时它是6:6

这是在小分辨率下，此时它是3:6

也就是说，我们可以指定4种分辨率底下的比例模式。这个我们就叫做跨设备组合。

1）首先我们先重新建一个demo04.html

<!DOCTYPE html>

<html>

<head>

<scripttype="application/javascript" src="js/jquery-1.11.1.min.js"></script>

<scripttype="application/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

</div>

</body>

</html>

运行效果：

在超小分辨率底下，前两个各占6格，后两个也各占6格，所以要排两列。44

在小分辨率下，第一个占3格，第二个占3格，第三个占3格，第四个也占3格，所以一行就可以排完了。

2）我们可以给它设置一个背景

div{ border: 1px #101010 solid;}

#container{ width: 800px; margin: 10px auto;}

</style>

运行效果：

3）我们可以在第一行第一列添加内容。

运行结果：

第一个占了两行的位置，第一列的内容比较多，所以第三个没有从最左边排。

4）我们把第三列排到第一列的底下，就要在第三列前面加清除浮动。

“clearfix visible-xs”

“visible-xs”表示只在超小分辨率下才加清除浮动，其它分辨率底下不清除。

运行结果：

这样就回到了原始的排版方式

注意：一个container拆分成12个小格，当你给的格数大于12格就自动排到下面来了。

0 0