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. R获取指定GO term和KEGG pathway的gene list基因集

    clusterProfiler没有显性的接口,但是可以直接扣取clusterProfiler里的函数. 核心函数就是get_GO_data GO_DATA <- get_GO_data(&quo ...

  2. HttpWebRequest使用时发生阻塞的解决办法

    HttpWebRequest使用如下: 第一种:使用Using 释放资源 /// <summary> /// Http Get请求返回数据 /// </summary> /// ...

  3. npm配置淘宝镜像

    npm直接安装包太慢,采用淘宝npm镜像安装 在linux和Mac上可以添加环境变量的形式修改bashrc文件,但是在windows上可以直接采取如下方式,以绝后患. 永久采用 npm config ...

  4. shell编程系列23--shell操作数据库实战之mysql命令参数详解

    shell编程系列23--shell操作数据库实战之mysql命令参数详解 mysql命令参数详解 -u 用户名 -p 用户密码 -h 服务器ip地址 -D 连接的数据库 -N 不输出列信息 -B 使 ...

  5. oracle存储过程中%type的含义

    转: oracle存储过程中%type的含义 2018-11-07 11:43:56 lizhi_ma 阅读数 1361更多 分类专栏: 数据库   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  6. java.io.EOFException at org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper.fillReadBuffer

    如题,网上找了相关资料查明是websocket连接超时的问题.使用了反向代理,因此超过60S没有数据传输的连接会断开. 把代理的那个超时时间设置长一点,无限长.你开什么玩笑!那还代理个啥玩意. 解决方 ...

  7. oracle DBA 常用表和视图

    ☆dba_开头.....   dba_users      数据库用户信息   dba_segments  表段信息   dba_extents    数据区信息   dba_objects    数 ...

  8. 123457123456#1#----com.MC.CarWashKidsGames234----前拼后广--洗车游戏mc-mc1111

    com.MC.CarWashKidsGames234----前拼后广--洗车游戏mc-mc1111

  9. python学习:几种采用的功能实现示例

    1.python 程序退出的几种方式 import sys sys.exit() sys.exit(0) sys.exit(1) 或者 os._exit() 该方法中包含一个参数status,默认为0 ...

  10. 无法复制CSD内容,复制后出现一行长字符串解决

    先打开一个linux文件,然后把复制的内容放到linux文件中即可解决