Bootstrap 栅格系统

最新推荐文章于 2022-06-15 11:58:22 发布

大大的芒果

最新推荐文章于 2022-06-15 11:58:22 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/oz965557340/article/details/56278234

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gird</title>
<style type="text/css">
[class*="col"]{

background-color: #269abc;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-3 col-md-6 col-lg-12">.lg-1 md-2 sm-3 xs-4</div>
<div class="col-sm-4 col-xs-3 col-md-6 col-lg-12">.lg-1 md-2 sm-3 xs-4</div>
<div class="col-sm-4 col-xs-3 col-md-6 col-lg-12">.lg-1 md-2 sm-3 xs-4</div>
<div class="col-sm-4 col-xs-3 col-md-6 col-lg-12">.lg-1 md-2 sm-3 xs-4</div>
</div>
<div style="height: 800px;width:auto;border: 1px solid #f0ad4e"></div>
</div>
</body>
</html>

bootstrap gird layout
栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

container-fulid  可以让你的nva全局化

Container

<div class="col-sm-4 col-xs-3 col-md-6 col-lg-12">

对手机平板中等大都不同适配

手机下 xs

平板下 sm

中等下 md

大屏幕下 lg

当我们少写一个的时候<div class="col-sm-4 col-md-6 col-lg-12">

如少写 xs lg 均有就采用 lg

当我们少写中间值的时候 xs 和 lg 均有

<div class="col-xs-3 col-lg-12">.lg-1 md-2 sm-3 xs-4</div>

Xs下

Sm下

Md下

Lg下

也就是说没有的情况下优先采用最小的xs 其次是最大的

在这种情况下

<div class=" col-md-6 ">

小于md的均会堆叠起来

超过的md的均会使用md

也就是说当我们为指定大小的时候

如果制定中间的排版大于中间的可以获得排版

如果制定中间的排版小于中间的就自动堆叠下去

大大的芒果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 栅格系统

html>html>head lang="en"> meta charset="UTF-8"> link href="css/bootstrap.css" rel="stylesheet"> meta name="viewport" content="width=device-width, initial-scale=1"> title>girdtitle>
复制链接

扫一扫