文章目录

一、Container容器
二、栅格系统
- 1. 自动布局列
- - 等宽布局
  - 设置一列宽度
  - 可变宽度的弹性空间
  - 等宽多行
  - 混合布局
- 2. 对齐
- - 垂直对齐
  - 水平对齐
  - 间隙去除（去除padding）
- 3. 重排序
- - Class顺序重定义
  - 列偏移

一、Container容器

容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。容器用于在其中容纳，填充和（有时）使内容居中。尽管可以嵌套容器，但是大多数布局不需要嵌套容器。
共有三种容器：

.container，在每个响应断点处设置不同的max-width
.container-fluid，所有断点处都为width: 100%,使div扩展到整个宽度
.container-{breakpoint}，width: 100%直到指定的断点为止（从小断点开始） eg.容器.container-lg前-sm,-md为width: 100%

下表说明了每个容器max-width与原始容器.container以及.container-fluid每个断点之间的比较。

	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	超大屏幕 ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	100%	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

二、栅格系统

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。
(分界点大小：576px、768px、992px、1200px)

栅格系统基于一个12列的布局：

有5种响应尺寸(对应不同的屏幕)：

1. 自动布局列

等宽布局

所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

<div class="container"><div class="row"><div class="col">1 of 2</div><div class="col">2 of 2</div></div><div class="row"><div class="col">1 of 3</div><div class="col">2 of 3</div><div class="col">3 of 3</div></div>
</div>

ps. 一行row中 div.col 数量不限，可超过12列，均分空间

设置一列宽度

<div class="container"><div class="row"><div class="col">1 of 3</div><div class="col-6">2 of 3 (wider)</div><div class="col">3 of 3</div></div></div>

中间占六格，剩余六格左右均分（三格）

可变宽度的弹性空间

用.col-{breakpoint}-auto断点方法，可以实现根据其内容的宽度来对列进行大小调整。

<div class="container">
<div class="row"><div class="col">111</div><div class="col-auto">222</div><div class="col">333</div>
</div>
</div>

222根据其内容自适应宽度

等宽多行

创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行

<div class="container"><div class="row"><div class="col">col</div><div class="col">col</div><div class="w-100"></div><div class="col">col</div><div class="col">col</div></div>
</div>

混合布局

同时加入对不同断点的分列

<div class="container"><div class="row"><div class="col-sm-6 col-lg-3">111</div><div class="col-sm-6 col-lg-3">222</div><div class="col-sm-6 col-lg-3">333</div><div class="col-sm-6 col-lg-3">444</div></div>
</div>

-lg以上屏幕一行四列
-sm--lg屏幕一行两列
-sm一下屏幕一行一列

2. 对齐

垂直对齐

在row上加 .align-items-start/center/end

start：顶部对齐
center：中部对齐
end：底部对齐

对齐后.col宽度适应内容

在col上加 .align-self-start/center/end

<div class="container"><div class="row"><div class="col align-self-start">One of three columns</div><div class="col align-self-center">One of three columns</div><div class="col align-self-end">One of three columns</div></div>
</div>

水平对齐

在row上加 .justify-content-start/center/end/around/between

start ：向一行的起始位置靠齐
end ：向一行的结束位置靠齐
center ：向一行的中间位置靠齐
around：等距对齐，未占满12格时间隙等距
between：两端对齐

可以加入断点.justify-content-{breakpoint}-start

间隙去除（去除padding）

每个.col有15的padding

在row上加 .no-gutters

3. 重排序

Class顺序重定义

使用 .order-* class选择符，可以对DIV空间进行可视化排序,系统提供了.order-1到.order-12 12个级别的顺序，在五种浏览器和设备宽度上都能生效。（同flexbox中order，元素默认为order-0）
还可以使用.order-first，快速更改一个顺序到最前面，相当于给元素加order：1

列偏移

Booststrap4布局（栅格系统）相关推荐

Bootstrap之移动设备优先、栅格系统、媒体查询，响应式式布局
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则响应式布局 <meta name="viewport" content="w ...
一、bootstrap4基础（布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类）
1.1 Bootstrap简单介绍 1.2 Bootstrap结构 1.3 Bootstrap安装和测试 1.4 布局系统 1.5 栅格系统 4.6 栅格等级 1.7 显示与隐藏 1.7 对齐与排列 ...
MUI框架：栅格系统 + grid宫格布局 - 案例篇
MUI框架 · 自定义宫格布局 · 应用案例: 通过使用MUI框架的栅格系统 + grid宫格布局 ,覆盖源码样式,以达到完美的页面效果. 效果图: 点击动画效果不再演示,具体效果参考源码效果! 全 ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345 时间 2014-02-20 17:58:00 博客园-原创精华区原 ...
Bootstrap3栅格系统布局实例
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先.使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局. 先看一个简单实例,来加深对移动设备优先的理 ...
移动WEB开发之响应式布局--Bootstrap栅格系统
栅格系统简介栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局. Bo ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...

Booststrap4布局（栅格系统）