《Bootstrap5零基础到精通》第八节 Bootstrap网页布局之网格之间间隙详解

5,407 阅读5分钟

这是我参与更文挑战的第8天,活动详情查看: 更文挑战

《Bootstrap5零基础到精通》 俺老刘原创,争取每天更新一节。

8.1 margin 和padding

8.1.1 margin 和padding的定义

margin(外边距):是指从自身边框到另一个容器(包括父容器与同级容器)边框之间的距离,是容器外距离。

padding(内边距):是指自身边框到自身内部子容器边框之间的距离,是容器内距离。

8.1.2 margin 和padding的相同点

(1)参数形式相同。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上、下,第二个用于左、右。如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

(2)内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

(3)容器与父容器的距离等于自身margin 和在父容器padding的和。

8.1.3 margin 和padding的不同点

(1)padding不能给负值,margin可以给负值。

(2)如果只有两个容器嵌套。在子容器上设置margin 和在父容器上设置padding效果类似。

8.1.4 margin 和padding演示及解析

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
       .div1{background-color: rgb(62, 62, 68);width: 1200px;height: 500px;padding:50px;}
       .div2{background-color: rgb(182, 191, 212);width:1200px;height:500px;}
       .div3{background-color: cornflowerblue;width: 300px;height:300px;float:left;margin:50px;padding:50px 0px;}
       .div4{background-color: rgb(114, 201, 121);width:200px;height:200px;margin:50px;}

    </style>
    <title>margin 和padding</title>
</head>
<body>
    <div class="div1">
        <div class="div2">
            <div class="div3"></div>
            <div class="div3">
                <div class="div4"></div>
            </div>
            <div class="div3"></div>
        </div>
    </div>
</body>
</html>

显示效果

8.1.1.1.png

示例解释:

(1)黑色边距50px是div1设置的padding产生的

(2)灰色部分上下左右边距50px是由div3产生的margin:50px。

蓝色方框中间的两个灰色距离100px是由左右两边的蓝色方框div3产生的margin:50px之和。

(3)蓝色方框内部左右距50px是由div4产生的padding:50px,上下是由div3产生的padding:50px 0px和div4产生的margin:50px之和。

(4)div3宽度、高度都为300px,它等于div4边长200px,再加上上下左右margin:50各50px。 你可能会有疑问,div3蓝色方框看起来高度不像是300px啊,其实蓝色区域不仅包含了div3区域,还包含了上下的padding 50px。

(5)div2的宽度=(300+50X2)X3=1200px

div2的高度=300+50X2+50X2=500px(前面50x2是div3的margin:50px;后面的50x2是div3的padding:50px 0px)

(6)div2没有margin 和padding,所以,div1和div2宽高度相等,不要把div1的算在里面哦。

(7)容器的宽度和高度是指不包含margin 和padding的宽度和高度,但是父容器要想容纳下子容器,其宽度高度必须包含子容器的宽度和高度加上子容器的margin和padding的宽度和高度(宽度包含左右、高度包含上下)。

相信通过我的一番讲解,大家对margin 和padding应该有了透彻的理解吧。如果看不懂就多看看,自己再多练习以下,自己写更加详细的例子练习。

8.2 Bootstrap 间隙

8.2.1 Bootstrap 间隙工作原理

  • Bootstrap间隙是由水平填充创建的列内容之间的间隙。由水平方向的 padding实现。 我们在每一列上设置右边填充和左边填充padding-right and padding-left,并在每一行的开始和结束处使用margin 来偏移该边距以对齐内容。
  • 间隙的宽度为1.5rem(24px),这允许我们将网格与填充和边距分隔符比例相匹配。
  • 间隙可以进行相应的调整。 使用断点特定的间隙类修改水平间隙、垂直间隙和所有间隙。

对这段话不理解也没关系,直接看下面的例子就好了。

8.2.2 Bootstrap水平间隙

.gx-*类可用于控制水平间隙宽度。如果使用较大的间隙,则可能需要调整.container或.container流体父级,以防止溢出。例如,在下面的示例中,我们使用.px-4增加了填充:

<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light"></div>
</div>
<div class="col">
<div class="p-3 border bg-light"></div>
</div>
</div>
</div>

另一种解决方案是在.row父容器添加.一个包含overflow隐藏类的包装器:

<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>

他们的效果都是一样的

Image 2.png

8.2.3 Bootstrap垂直间隙

.gy-*类可用于控制垂直间隙宽度。与水平间隙一样,垂直间隙也会导致页面末尾的行下面出现一些溢出。如果出现这种情况,请在.row父容器添加一个包含.overflow隐藏类的包装器。

<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>

其效果如下:

Image 3.png

8.2.4 Bootstrap水平和垂直间隙

.g-*类可用于控制水平间隙宽度,对于以下示例,我们使用较小的间隙宽度,因此不需要添加.overflow隐藏包装类。前面的x、y其实就是水平和垂直坐标系的意思。

<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>

Image 4.png

8.2.5 Bootstrap行列间隙

也可以将间隙类添加到行列中。在下面的示例中,我们使用响应行列和响应间隙类。

<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>

Image 6.png

8.2.6 Bootstrap无间隙

可以使用 .g-0删除预定义网格类中列之间的间隙。这将删除.row的margin和所有直接子列的水平填充。

需要边到边的设计吗? 放弃 .container or .container-fluid. 实际上,它看起来是这样的。注意:您可以继续将其用于所有其他预定义的网格类(包括列宽、响应层、重排序等)。

<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

效果图 Image 5.png

今天的课程就到这里,到此,关于网格终于也要告一个段落了。请关注我,及时学习 俺老刘原创的《Bootstrap5零基础到精通》第九节 Bootstrap对网页排版做了哪些颠覆设计。如果这篇文章对你有帮助,记得随手点赞哦!