bootstrap栅格系统的container和row一些关系

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一些关系的更多相关文章
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
- Bootstrap栅格系统基本使用
1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...
- Bootstrap 栅格系统初识
以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...
- 第二百三十五节,Bootstrap栅格系统
Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
随机推荐
- cmd命令net和sc
来看windows中启动和关闭服务的方法:在cmd下可有两种方法打开,分别是net和sc. 1.net用于打开没有被禁用的服务, NET命令是功能强大的以命令行方式执行的工具. 它包含了管理网络环境. ...
- JVM 类加载器ClassLoader源码学习笔记
类加载 在Java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的. 类型可以是Class,Interface, 枚举等. Java虚拟机与程序的生命周期 在如下几种情况下,Java虚拟机 ...
- 关于PHP中token的生成的解析
背景 很多时候我们需要用 token 来作为一些标识, 比如: 一个用户登录后的认证标识. 实现方式 md5 的方式: $v = 1; // 自己定义的 需要hash 的value 值 $key = ...
- phpstorm 使用xdebug断点
1.下载对应版本 xdebug 下载地址:https://download.csdn.net/download/q2104574/11185239 比如你用的php7.0.12以上的版本,xdebug ...
- JS数组常见方法的深浅拷贝分类
一.涉及浅拷贝类方法,会改变原数组 1,pop(): 删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返 ...
- C#读取Word指定页的内容
/// <summary> /// Word按页读取内容 /// </summary> /// <param name="page">页数< ...
- Tomcat7/8/8.5三种版本的redis-session-manager的jar和xml配置均不同
chexagon/redis-session-manager: A tomcat8 session manager providing session replication via persiste ...
- istio 简介
最近接触到了 istio,感觉十分强大,写篇短文推荐给大家.本文所涉及的具体实验步骤可以参考官网教程. istio 相关文章列表: istio 简介 istio 性能测试 istio 是什么 Isti ...
- Sword zlog日志库使用
配置文件*.conf 配置文件具体内容如下: [global] #改变量可以不写,默认是true,如果使用设置为true时,Zlog就会严格检查所用格式和规则,否则,忽略所用格式和规则. strict ...
- VMware虚拟机提示“锁定文件失败 打不开磁盘”解决方法
VMware虚拟机提示“锁定文件失败 打不开磁盘”解决方法 摘自: http://www.xitongcheng.com/jiaocheng/xtazjc_article_40299.html 发布时 ...