2.1 容器(Container)

一、容器简介

容器是一个简单的实用程序元素,允许您将内容集中在较大的视口中。它可以在任何上下文中使用,但大多数情况下是以下内容之一的直接子级:

  • navbar导航栏

  • hero英雄旗帜广告

  • section

  • footer页脚

关于容器的具体说明,你可以参考https://www.bulmacss.cn/doc/read/110.html


二、具体使用

虽然官方文档上说明是放在某个组件的直接子级,但是我一般会在真个页面放一个容器,这样可以方便调整网页的边距和宽度。

容器使用起来很简单,直接用一个div标签,只有一个参数,可以设置宽度。

另外该容器是可以嵌套使用的。

<div class="container">
.......
</div>

以下是每个参数在不同分辨率情况下得容器宽度:


1024px以下1024px - 1215px宽屏1216px-1407px

高清1408px以上

container全宽960px1152px1344px
container is-widescreen全宽全宽1152px1344px
container is-fullhd全宽全宽全宽1344px
container is-max-desktop全宽960px1152px1152px
container is-max-widescreen全宽960px1152px1152px
container is-fluid不具有最大宽度,在左右两侧保留32px边距



以下是不同宽度设置的演示,里面的<div class="notification is-primary">标签是为方便演示添加的,和容器组件无关。

你用电脑看起来是完全一样的,你可以调整以下分辨率,查看不同分辨率下得效果



此容器集中在桌面和较大的视口上。


在$widescreen断点之前,此容器是全屏的。


在$fullhd断点之前,此容器是全宽的。


This container has a max-width of $desktop - $container-offset on widescreen and fullhd.


This container has a max-width of $widescreen - $container-offset on fullhd.


<div class="container">
    <div class="notification is-primary">
    此容器集中在桌面和较大的视口上。
    </div>
  </div>
<br>

<div class="container is-widescreen">
    <div class="notification is-primary">
    在$widescreen断点之前,此容器是全屏的。
    </div>
  </div>
<br>
<div class="container is-fullhd">
    <div class="notification is-primary">
    在$fullhd断点之前,此容器是全宽的。
    </div>
  </div>
<br>
<div class="container is-max-desktop">
    <div class="notification is-primary">
      This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
    </div>
  </div>
<br>
<div class="container is-max-widescreen">
    <div class="notification is-primary">
      This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
    </div>
  </div>


返回头部

问题反馈
返回顶部