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的内容较多,新手往往不能很快 ...
随机推荐
- Spark(四十七):Spark UI 数据可视化
导入: 1)Spark Web UI主要依赖于流行的Servlet容器Jetty实现: 2)Spark Web UI(Spark2.3之前)是展示运行状况.资源状态和监控指标的前端,而这些数据都是由度 ...
- leetcode 611. Valid Triangle Number 、259. 3Sum Smaller(lintcode 918. 3Sum Smaller)
这两个题几乎一样,只是说611. Valid Triangle Number满足大于条件,259. 3Sum Smaller满足小于条件,两者都是先排序,然后用双指针的方式. 611. Valid T ...
- osgearth 编译日志
1>------ 已启动生成: 项目: ZERO_CHECK, 配置: Debug x64 ------1> Checking Build System1> CMake does n ...
- Django ORM的继承关系
ORM中通常将对象引用映射到外键,但是对于继承,关系数据库中没有自然有效的方法来对应.从数据存储的角度来看,在映射继承关系时,可以采用几种方式(参考JPA中的InheritanceType.定义): ...
- Spring cloud微服务安全实战-6-7jwt改造总结
限流的改造. 同样注意,不要声明成Spring的Bean 在上面声明Rateliiter 如果能获取到权限继续往下走,没权限就返回,to many request的错误信息. 加到过滤器链上 加载Sp ...
- 算法习题---5-3卡牌游戏(UVa10935)
一:题目 给定n张卡片,按照1-n的顺序编号,然后拿出一张卡片扔掉,拿出一张卡片放到最后,重复该操作直到只剩1张卡片. 求扔掉的卡片序列和最后剩的卡片的编号. (一)样例输入 7 //卡牌编号从1到7 ...
- 【427】Graph 实现 以及 DFS & BFS
目录: Graph 实现 二维数组实现 Linked List 实现 DFS:深度优先搜索 stack 实现 recursion 实现 BFS:广度优先搜索(queue) 其他应用 非连通图遍历 - ...
- jQuery 属性操作 - toggleClass() 方法
实例 对设置和移除所有 元素的 "main" 类进行切换: $("button").click(function(){ $("p").tog ...
- spring @Transactional的自调用失效问题与事务的典型错误用法剖析
@Transactional的自调用失效问题 有时候配置了注解@Transactional,但是它会失效,这里要注意一些细节问题,以避免落入陷阱. 注解@Transaction的底层实现是Spring ...
- JavaScript获取手机屏幕翻转方法
/*屏幕翻转*/ window.addEventListener(window['onorientationchange'] ? 'orientationchange' : 'resize', fun ...