container有个15px的padding,而我们设定的每个col也都有15px的padding,如果两者直接配合,那么就会产生30px的间距,导致内容和浏览器边框的距离较大,所以用row将所有的col包裹,row会有一个-15px的margin,可以抵消掉一个container或col产生的15px的padding值。

另,官网中的关于gutter的条目中的示例:(https://getbootstrap.com/docs/4.3/layout/grid/)

<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>

在这里把理解记录一下,以防忘记。

意思是col增加px-lg-5的类,会使col的padding值增大,所以row需要通过增加mx-lg-n5的类去减少同样多的padding去抵消增加的部分,为了防止意外的溢出,container也需要增加px-lg-5的类以增加同样多的padding(这里没明白啥意思,照着做就好了)。上面的类名,px-lg-5中p指padding?,mx-lg-n5中m指margin?,n应该是negative。

bootstrap栅格系统的container和row一些关系的更多相关文章

  1. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  2. Bootstrap栅格系统(布局)

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  3. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  5. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  6. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  7. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  8. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

  9. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

随机推荐

  1. 如何提高工具开发和数据分析的效率?| jupyter | Rstudio server

    这部分是超级干货,也能直接体现一个开发分析者的能力. 主要分为两部分: 1. 面对新问题时,如何高效的分析和开发? 2. 面对相似的问题时,如何最快时间的利用之前的开发经验? 因为现在我主要用shel ...

  2. html访问图片资源403问题(http referrer)

    前言 之前碰到一个问题,就是html中通过img标签引入一个图片地址,报403.但是这个图片地址直接复制出来在地址栏打开,却是看得到的.     先说下解决方法: 在HTML代码的head中添加一句& ...

  3. Nginx 配置操作注意事项

    Nginx reload 会中断现有连接吗? - 知乎https://www.zhihu.com/question/57096250 在NGINX上配置HTTPS---血的教训--要重启NGINX - ...

  4. CentOS上安装GlassFish4.0

    1.  安装jdk 2. 下载并安装glassfish4 [root@linuxidc ~]# mv glassfish-4.0-ml.zip /usr/share/glassfish-4.0-ml. ...

  5. 将移远通信的EC20驱动移植到NUC972上(转)

    源: 将移远通信的EC20驱动移植到NUC972上

  6. PHP 构造函数和析构函数

    构造函数 __construct ([ mixed $args [, $... ]] ) : void PHP 5 允行开发者在一个类中定义一个方法作为构造函数.具有构造函数的类会在每次创建新对象时先 ...

  7. ztree checkbox父子联动

    1. 对于ztree而言,如果需要设置或者取消ztree的父子联动,只要在setting里面设置chkboxType的参数即可: 其中Y表示被checkbox被勾选时的联动情况,N表示取消勾选时的联动 ...

  8. PHP过狗webshell编写过程

    0x1 先上图: 0x2 编写过程 这里必须强调一下我内心的感觉,小阔爱前两天也研究了过狗的一句话了,然后我突然觉得大家都在进步,我研究点啥呢?不如也试试以前因为觉得自己不懂代码,而不会研究的免杀sh ...

  9. postgresql 利用pgAgent实现定时器任务

    1.安装pgAgent 利用Application Stack Builder安装向导,安装pgAgent. 根据安装向导一步一步安装即可. 安装完成之后,windows服务列表中会增加一个服务:Po ...

  10. VPB测试 使用Osgdem运行例子

    1.Osgdem运行例子所需数据下载地址: http://www.cc.gatech.edu/projects/large_models/ps.html Download Elevation Map: ...