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

在桌面设备中， .container 的宽度固定为“$desktop - 40px”，也就是 960px ，然后居中显示。
在宽屏设备中， .container 的宽度固定为“$widescreen - 40px”，也就是 1152px ，然后居中显示。
在大屏设备中， .container 的宽度固定为“$fullhd - 40px”，也就是 1344px ，然后居中显示。
除此之外，在桌面设备中，如果 .container 还额外指定了 .is-fluid 类，那么宽度就不再固定，不过左右两边各有了 20px 的外边距。