Bulma 源码解析之 .container 类

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 的变量定义可以在 这里 看到。

（完）