Bootstrap7 栅格

1 栅格基础

响应式布局与媒体查询
https://blog.csdn.net/weixin_44055272/article/details/90241688

1.1 通用的栅格

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。这样就方便了布局。

1.2 栅格对于不同设备的处理

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

1.3 栅格的基本的标签写法

1.最外面有个div container类
2.中间有个div row类
3.里面有个div 类前缀-数字

<div class="container">
    <div class="row">
        <div class="col-md-2 col-lg-6" style="background-color: #4CAF50">6</div>
        <div class="col-md-3 col-lg-4" style="background-color: #FFD700">4</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-lg-3" style="background-color: #4CAF50">3</div>
        <div class="col-md-5 col-lg-9"style="background-color: #FFD700">9</div>
    </div>
</div>

1.4 对于移动设备的处理

移动设备优先策略
内容
决定什么是最重要的。
布局
优先设计更小的宽度。
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
随着屏幕大小的增加而添加元素。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

特殊情况

2.1 一行装不下

添加了栅格以后，就会把元素解释为左浮动的。因此如果一行装不下，会像浮动一样到第二行。

<div class="container">
    <div class="row">
        <div class="col-lg-6" style="background-color: #4CAF50">6</div>
        <div class="col-lg-4" style="background-color: #FFD700">4</div>
        <div class="col-lg-4" style="background-color: #1b6d85">4</div>
    </div>
</div>

2.2 列偏移 col-*-offset-*类

向后偏移通过改变左外边距实现，不会影响浮动。向后移动几个栅格。

    <div class="row">
        <div class="col-lg-6 col-lg-offset-push-1" style="background-color: #4CAF50">6</div>
        <div class="col-lg-4" style="background-color: #FFD700">4</div>
        <div class="col-lg-4" style="background-color: #1b6d85">4</div>
    </div>

2.3 列排序

通过改变，向后偏移col-*-push-，向前偏移col--pull-*。通过改变相对定位实现。

    <div class="row">
        <div class="col-lg-6 col-lg-offset-1" style="background-color: #4CAF50">6</div>
        <div class="col-lg-4" style="background-color: #FFD700">4</div>
        <div class="col-lg-4" style="background-color: #1b6d85">4</div>
    </div>

2.4 列嵌套

<div class="container">
    <div class="row">
        <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
                <div class="col-xs-8 col-sm-6">
                    Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                    Level 2: .col-xs-4 .col-sm-6
                </div>
            </div>
        </div>
    </div>
</div>

2.5 响应式的列重置

待补充。