{说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow

.columns
// 修饰类
&.is-centered
justify-content: center
&.is-multiline
flex-wrap: wrap
&.is-vcentered
align-items: center
// 在平板+设备上采用 Flex 布局
+tablet
display: flex .column
display: block
&.is-grow
flex-grow: 1
@for $i from 1 through 12
&.is-#{$i}
width: ($i / 12) * 100%
&.is-offset-#{$i}
margin-left: ($i / 12) * 100%

Bulma 的网格系统一行默认分成 12 列。.columns 包围 .column 进行网格布局。.columns 被设定为,在平板+设备上采用 Flex 布局,在手机上的使用默认的布局。

.columns 提供了三个辅助类:

  1. .is-centered:列居中显示。
  2. .is-multiline:列可多行显示。
  3. .is-vcentered:列垂直居中显示。

.column 类被设定为块状元素。提供的类有:

  1. .is-1.is-12:列的宽度占一行宽度的比例。
  2. .is-offset-1.is-offset-12:列的偏移量占一行宽度的比例。

另外,我额外添加了一个类 .is-grow,表示在一行上如果有剩余空间,则被标记为该类的 .column 就会适当扩充宽度。

(完)

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

  1. Bulma 源码解析之 .container 类

    Bulma 的 .container 类是这样实现的. .container position: relative // 不设置桌面以下设备的 container +desktop margin: 0 ...

  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. VI编辑器、ipython、jupyter及进程

    VI编辑器.ipython.jupyter及进程知识总结 https://www.cnblogs.com/thoughtful-actors/p/9650959.html VI编辑器.ipython. ...

  2. 10个 NPM 使用技巧

    对于一个项目,常用的一些npm简单命令包含的功能有:初始化一个文件夹( npm init ),下载npm模块( npm install ),创建测试( npm tese ) 和自定义脚本( npm r ...

  3. as3设计模式乱用之工厂模式

    好久没写技术相关的日记了,一忙,二懒,三则被这单调的生活熏得没什么感悟. 其实这篇日记早就想写了,项目开发初期的时候,带学生.经常看到那种乱用设计模式的现象.一方面,公司面试人的时候喜欢问设计模式,另 ...

  4. 市场上 MLCC 226 电容现象

    市场上 MLCC 226 电容现象 三星 X7R 1206 没有 16V 也有人在卖. Y5V 当 X7R 卖. X5R 当 X7R 卖. 薄电容当厚的电容卖.

  5. ubuntu 挂载exfat

    在ubuntu下,由于版权的原因,默认不支持exfat格式的u盘,不过可以很方便就能添加对exfat的支持: 1.对于ubuntu 14.04版本,直接运行下面的命令就可以了: sudo apt-ge ...

  6. CountDownLatch和cyclicbarrier的使用

    CountDownLatch: 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数初始化 CountDownLatch.由于调用了 countDown ...

  7. jquery中validation部分学习笔记

    1.valid()和rules()valid()方法:检查表单或某些元素是否有效,返回值为boolean型, 全部通过检查规则返回true,只要有不通过的检查规则都返回false rules()方法: ...

  8. 解决方案: the selected file is a solution file but was created by a newer version of this application and cannot be opened

    最近在用IronGithub访问Github api时遇到一个问题: the selected file is a solution file but was created by a newer v ...

  9. java List 等份截取

    /** * 描述: 等份截取 * @author eyesmooon * @param list * @param size * @return * @date:2018年11月8日 下午8:00:3 ...

  10. Windows 7 下将 Tomcat Java 程序设置为 Windows Service

    方法: Windows key + r -> Run dialog cmd -> console cd apache-tomcat-[version]/bin service.bat in ...