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的内容较多,新手往往不能很快 ...
随机推荐
- 百度编辑器contentChange监听不到图片上传
将ueditor组件化到java项目中,当调用组件后,绑定函数,监听contentchange如下图: um.addListener("contentChange",functio ...
- Windows 10 Tensorflow 2 gpu正式版安装和更新日志
Windows 10 Tensorflow 2 gpu正式版安装和更新日志 Tensorflow 2.0.0 released on2019年10月1日星期二 Link: https://github ...
- RabbitMQ教程C#版 - 工作队列
先决条件本教程假定 RabbitMQ 已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需要调整连接设置. 从哪里获得帮助如果您在阅读本教程时遇到困难,可以 ...
- PHP 构造函数和析构函数
构造函数 __construct ([ mixed $args [, $... ]] ) : void PHP 5 允行开发者在一个类中定义一个方法作为构造函数.具有构造函数的类会在每次创建新对象时先 ...
- Hibernate Tools插件的安装和使用
http://ricki.iteye.com/blog/842343 http://blog.csdn.net/kinmet2010/article/details/5976869 http://ww ...
- openresty开发系列20--lua的时间操作
openresty开发系列20--lua的时间操作 在 Lua 中,函数 time.date 和 difftime 提供了所有的日期和时间功能.在 OpenResty 的世界里,不推荐使用这里的标准时 ...
- Python“文件操作”Excel篇(上)
大家好,我们今天来一起探索一下用Python怎么操作Excel文件.与word文件的操作库python-docx类似,Python也有专门的库为Excel文件的操作提供支持,这些库包括xlrd.xlw ...
- html两端对齐的代码
html语言两端对齐的代码为: <p style="text-align:justify; text-justify:inter-ideograph;"> 文字,需要对 ...
- java获取全部子类或接口的全部实现
在JAVA中,获取一个类的全部父类是比较简单的,只需要通过反射(Class的getSuperclass()方法)即可.然而,如果想获得一个类的所有子类,或者获得实现某一个接口的所有实现类,相对比较麻烦 ...
- 增强篇3 SAP表字段增强
有两种方式: Include 和 Append 1.INCLUDE一般都是标准预留的增强: 以CO01生产订单增强字段为例 在表AUFK中INCLUDE的结构“CI_AUFK”加入自定义字段 保存 ...