bootstrap3,4对比(速度过)之网格系统

最新推荐文章于 2025-05-18 14:52:34 发布

Ron韦斯莱

最新推荐文章于 2025-05-18 14:52:34 发布

阅读量976

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_43537987/article/details/93753684

本文对比了Bootstrap 3和Bootstrap 4的网格系统，包括container的区别，V4中直接使用class='col-n'的便利性，对齐方式的变化，如垂直和水平对齐，以及如何实现没有排水沟的效果。还介绍了排序、列偏移和嵌套的用法。

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

网格系统

v3:

<https://v3.bootcss.com/css/#grid

v4:

https://v4.bootcss.com/docs/4.0/layout/grid/

container和container-fluid（v3,v4相同）

container两边有一定的margin
container-fluid占满横向全屏，无两侧margin
行用row，列col
一行共12份

 <div class="container">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;"></div>
        <div class="col-lg-4" style="background-color: red;"></div>
        <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>
  </div>

 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;"></div>
        <div class="col-lg-4" style="background-color: red;"></div>
        <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>
  </div>

container的不同之处

v3container由分成四段：
在这里插入图片描述

v4container由分成五段：

在这里插入图片描述

V4中可直接使用class="col-n"和class=“col”

在v3中只能使用col-md(lg,sm,xs)-n，实测显示在v3中使用class="col-n"和class=“col”，每个col分别占一行
在v4中假设使用col-4,则3个col-4占一行
在v4中假设使用col,则不管多少个，就算超出12份，所有的col都占一行，且均分

请看代码：（v4）

<container>
  <div class="row">
    <div class="col-4" style="background-color: red;"></div>
    <div class="col-4" style="background-color: blue;"></div>
    <div class="col-4" style="background-color: yellow;"></div>
    <div class="col-4" style="background-color

最低0.47元/天解锁文章