bootstrap 栅格系统笔记

最新推荐文章于 2023-01-11 20:46:17 发布

seveinn

最新推荐文章于 2023-01-11 20:46:17 发布

阅读量636

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_38335055/article/details/105685613

本文详细介绍了Bootstrap栅格系统的底层原理、响应式布局，包括.container和.container-fluid的使用，如何设置等宽列、多行等宽列，以及自定义列宽、列偏移、对齐方式和间距调整。此外，还探讨了栅格系统的嵌套和列的排序，为开发者提供了全面的栅格系统使用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

底层原理

依托于媒体查询 @media

3.x 版本    —— 使用流式布局(float)
4.x 版本    —— 使用弹性盒模型(flex)
                flex: 扩展比例 压缩比例 盒子大小;

不同大小的屏幕宽度  ->  不同的响应层 -> 不同的类名  ->  不同的样式

当满足多个媒体特性的条件时，比如：
    屏幕尺寸 > 1200px
    屏幕尺寸 > 960px
取数值较大的媒体查询的结果  --> 最终的结果与bootstap的CSS源码媒体查询的书写顺序有关

    <div class="container-fluid">
        <div class="row">
            <!-- 一行默认12列 -->
            <div class="col-xl-1">第1列</div>
            <div class="col-xl-1">第2列</div>
            <div class="col-xl-1">第3列</div>
            <div class="col-xl-1">第4列</div>
            <div class="col-xl-1">第5列</div>
            <div class="col-xl-1">第6列</div>
            <div class="col-xl-1">第7列</div>
            <div class="col-xl-1">第8列</div>
            <div class="col-xl-1">第9列</div>
            <div class="col-xl-1">第10列</div>
            <div class="col-xl-1">第11列</div>
            <div class="col-xl-2">第12列</div>
            <!-- <div class="col-xl（响应层简写）-2（该数字表示所占列数）">
                第12列
            </div> -->
        </div>
    </div>

响应层分为

媒体响应层	grid配置
extra small	.col
small	.col-sm
medium	.col- md
large	.col-lg
extra large	.col-xl

具体响应层特性可参阅bootstrap文档：
https://getbootstrap.com/docs/4.4/layout/overview/

.container 和 .container-fluid

.container          设置了该类的元素，始终相对于父容器居中，不同的响应层有不同的定宽
.container-fluid    设置了该类的元素，宽度始终为父容器的100%

设置等宽列

通过class '.col' 设置

        <div class="row mt-5">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>

设置多行的等宽列

通过class '.w-100' 设置

div.w-100 {
   
   
            height: auto;
            border: none;
        }

       <div class="row mt-5">
            <div class="col">等宽列1</div>
            <div class="col">等宽列2</div>
            <div class="w-100"></div>
            <div class="col">等宽列3</div>