3.栅格系统

Posted 2020-12-23 lanshanxiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3.栅格系统相关的知识，希望对你有一定的参考价值。

# 3.栅格系统

介绍的是 4.5.x版本

一行最多放12列

- class类介绍

最外层容器：

1.container-fluid：宽度100%,和body的宽度一样

2.container：宽度是一个具体数值，但是会根据用户屏幕大小来改变

行类

1.row：分行

列类：

5个响应层

后面的*表示占据列数,取值从1-12

1.col-*:None(auto);//col为超小屏，屏幕<576px，容器的宽度固定为auto，一行可以永远设置12个列

2.col-sm-*:540px;//sm为小屏，屏幕>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列

3.col-md-*:720px;//md为中屏，屏幕>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列

4.col-lg-*:960px;//lg为大屏，屏幕>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列

5.col-xl-*:1140px;//xl为超大屏，屏幕>=1200px，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸<1200的时候，一行只能设置1列

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.row div{

height:100px;

background:green;

border:1px solid #000;

color:#fff;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

```

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.row div{

height:100px;

background:green;

border:1px solid #000;

color:#fff;

}

.v-align{

height:100px;

background:rgba(255,0,0,0.1);

margin:10px -15px;

}

.v-align div{

height:40px;

line-height:40px;

background:rgba(86,61,124,0.2);

color:#333;

}

</style>

</head>

<body>

</div>

</div>

<div class="col-sm-7">在小屏下占7列</div>

<div class="col">自动平分剩余的宽度</div>

</div>

<div class="col-md-auto">在中等屏幕下内容撑开宽度</div>

</div>

<div class="col-8">所有尺寸下都占8列</div>

<div class="col-4">所有尺寸下都占4列</div>

</div>

<!--

混合排列或组合模式

1.超大屏幕下一行显示6个div，一个div占2列

2.大屏幕下一行显示4个div，一个div占3列

3.中屏幕下一行显示3个div，一个div占4列

4.小屏幕下一行显示2个div，一个div占6列

5.超小屏幕下一行显示1个div，一个div占12列

-->

</div>

<!-- 对齐

垂直对齐：

1.行对齐方式

align-items-start:顶对齐

align-items-center:中间对齐

align-items-end:底对齐

2.列的单独对齐方式

align-self-start:顶对齐

align-self-center:中间对齐

align-self-end:底对齐

-->

<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>

</div>

<div class="col">垂直对齐-中间对齐-行的对齐方式</div>

</div>

<div class="col">垂直对齐-底部对齐-行的对齐方式</div>

</div>

<div class="col align-self-start">垂直对齐-顶部对齐-列的对齐方式</div>

<div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>

<div class="col align-self-end">垂直对齐-底部对齐-列的对齐方式</div>

</div>

<!--水平对齐

1.justify-content-start 左对齐

2.justify-content-center 居中对齐

3.justify-content-end 右对齐

4.justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）

5.justify-content-between 左右两端对齐（元素之间的间距是自动平分的）

-->

<div class="col-4">水平对齐-左对齐-行的对齐方式</div>

</div>

<div class="col-4">水平对齐-居中对齐-行的对齐方式</div>

</div>

<div class="col-4">水平对齐-右对齐-行的对齐方式</div>

</div>

<div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>

</div>

<div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>

</div>

<!--

列排序：使用。order-{breakpoint}-*

3.X的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-* 来排序

-->

</div>

<div class="col order-xl-4">第二列</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--间距：使用margin工具可以让列之间产生间距

margin-right 和 margin-left

mr-{breakpoint}-auto 使右侧的列远离到最右边

ml-{breakpoint}-auto 使左侧的列远离到最左边

-->

<div class="col-md-4 ml-auto">第二列，跑到最右边</div>

</div>

<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>

</div>

<div class="col-auto mr-auto">宽度由内容撑开</div>

<div class="col-auto">宽度由内容撑开</div>

</div>

父级的第一列

<div class="col-sm-8 col-6">子级的第一列，小屏下占8列，超小屏下占6列</div>

</div>

<div class="col-sm-3" style="height:150px;background:pink;">父级的第二列</div>

</div>

</body>

</html>

```

以上是markdown格式的笔记

以上是关于3.栅格系统的主要内容，如果未能解决你的问题，请参考以下文章

使用Bootstrap前端框架的栅格系统搭建页面布局

栅格系统