Bulma 的 .container 类是这样实现的。

.container
position: relative
// 不设置桌面以下设备的 container
+desktop
margin: 0 auto
width: $desktop - 40px
// 修饰类
// .container.is-fluid 不固定长度、左右两边保留 20px 的外边距,在桌面+设备上有效
&.is-fluid
margin: 0 20px
max-width: none
width: auto
+widescreen
width: $widescreen - 40px
+fullhd
width: $fullhd - 40px
  1. 桌面设备中,.container 的宽度固定为“$desktop - 40px”,也就是 960px,然后居中显示。
  2. 宽屏设备中,.container 的宽度固定为“$widescreen - 40px”,也就是 1152px,然后居中显示。
  3. 大屏设备中,.container 的宽度固定为“$fullhd - 40px”,也就是 1344px,然后居中显示。
  4. 除此之外,在桌面设备中,如果 .container 还额外指定了 .is-fluid 类,那么宽度就不再固定,不过左右两边各有了 20px 的外边距。

{提示} 关于 $desktop$widescreen$fullhd 的变量定义可以在 这里 看到。

(完)

Bulma 源码解析之 .container 类的更多相关文章

  1. Bulma 源码解析之 .columns 类

    {说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow. .columns // 修饰类 &.is-centered justify-content: cente ...

  2. Mybatis源码解析3——核心类SqlSessionFactory,看完我悟了

    这是昨晚的武汉,晚上九点钟拍的,疫情又一次来袭,曾经熙熙攘攘的夜市也变得冷冷清清,但比前几周要好很多了.希望大家都能保护好自己,保护好身边的人,生活不可能像你想象的那么好,但也不会像你想象的那么糟. ...

  3. AOP源码解析:AspectJAwareAdvisorAutoProxyCreator类的介绍

    AspectJAwareAdvisorAutoProxyCreator 的类图 上图中一些 类/接口 的介绍: AspectJAwareAdvisorAutoProxyCreator : 公开了Asp ...

  4. Netty源码解析 -- 内存对齐类SizeClasses

    在学习Netty内存池之前,我们先了解一下Netty的内存对齐类SizeClasses,它为Netty内存池中的内存块提供大小对齐,索引计算等服务方法. 源码分析基于Netty 4.1.52 Nett ...

  5. AOP源码解析:AspectJExpressionPointcutAdvisor类

    先看看 AspectJExpressionPointcutAdvisor 的类图 再了解一下切点(Pointcut)表达式,它指定触发advice的方法,可以精确到返回参数,参数类型,方法名 1 pa ...

  6. java源码解析之Object类

    一.Object类概述   Object类是java中类层次的根,是所有类的基类.在编译时会自动导入.Object中的方法如下: 二.方法详解   Object的方法可以分成两类,一类是被关键字fin ...

  7. java源码解析之String类(二)

    上一节主要介绍了String类的一些构造方法,主要分为四类 无参构造器:String(),创建一个空字符串"",区别于null字符串,""已经初始化,null并 ...

  8. java源码解析之String类(一)

    String是我们接触最多的类,无论是学习中还是工作中,基本每天都会和字符串打交道,从字符串本身的各种拼接.切片.变形,再到和其他基本数据类型的转换,几乎无时无刻都在使用它,今天就让我们揭开Strin ...

  9. Spring源码解析 – @Configuration配置类及注解Bean的解析

    在分析Spring 容器创建过程时,我们知道容器默认会加载一些后置处理器PostPRocessor,以AnnotationConfigApplicationContext为例,在构造函数中初始化rea ...

随机推荐

  1. /dev/root: No such file or directory

    /*************************************************************************** * /dev/root: No such fi ...

  2. JSplitPane的简单实现

    import java.awt.Color; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.J ...

  3. rabbitmq的vhost与用户管理

    当我们在创建用户时,会指定用户能访问一个虚拟机,并且该用户只能访问该虚拟机下的队列和交换机,如果没有指定,默认的是”/”;一个rabbitmq服务器上可以运行多个vhost,以便于适用不同的业务需要, ...

  4. Pix mesa 自动化测试

    最近在准备PIX的认证, 需要进行mesa测试. 但是Mesa的标准测试工具中没有针对PIX的TestCase, 只是提到NIST的web测试.路径为:http://pixpdqtests.nist. ...

  5. (二 )结构ztree的 ajax交互的简单使用

    在第一篇的基础上更改,在实际项目中的使用. 一:HTML 代码: <SCRIPT type="text/javascript"> var setting = { asy ...

  6. ORA-28547:connection to server failed, probable Oracle Net admin error错误,解决方法

    当用navicat连接oralce数据库时报ORA-28547错误时,直接懵逼了,上网查了资料说是navicat自带的oci.dll文件的版本和服务器端的oralce数据库的版本不一致造成的. 修改O ...

  7. 蓝桥杯 算法训练 ALGO-140 P1101

    算法训练 P1101 时间限制:1.0s 内存限制:256.0MB    有一份提货单,其数据项目有:商品名(MC).单价(DJ).数量(SL).定义一个结构体prut,其成员是上面的三项数据.在主函 ...

  8. Linux应用程序调用其他程序执行

    一.system 1.作用 在Linux应用程序中调用另一个程序: 2.用法 system("/sbin/ifconfig"): 二.popen 1.作用 调用另一个程序执行,同时 ...

  9. 使用Asset Pipeline管理rails生产环境静态资源实现步骤

    1.    修改项目中指向静态资源文件的链接 a)     访问静态资源文件 <%= stylesheet_link_tag "application", media: &q ...

  10. 第十章 Executor框架

    在Java中,使用线程来异步执行任务.Java线程的创建与销毁需要一定的开销,如果我们为每一个任务创建一个新线程来执行,这些线程的创建与销毁将消耗大量的计算资源.同时,为每一个任务创建一个新线程来执行 ...