Container 的使用例子

The container class can be used in any context, but mostly as a direct child of either:

  • navbar
  • hero
  • section
  • footer

The containers width for each breakpoint is the result of: $device - (2 * $gap). The $gap variable has a default value of 32px but can be modified.

This is how the container will behave:

  • on $desktop it will have a maximum width of 960px.
  • on $widescreen it will have a maximum width of 1152px.
  • on $fullhd it will have a maximum width of 1344px.

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16. 


<div class="container">
        <div class="notification">
          This container is <strong>centered</strong> on desktop.
        </div>
      </div>

如何使用 section

<body>
        <section class="section">
          <div class="container">
            <h1 class="title">Section</h1>
            <h2 class="subtitle">
              A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
            </h2>
          </div>
        </section>
      </body>

如何使用 css组件

<body>
            <section class="section">
              <div class="container">
                <h1 class="title">Section</h1>
                <h2 class="subtitle">
                  A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
                </h2>
              </div>
            </section>
          </body>

Button 的例子

Anchor