このコンポーネントを使用すると、ページコンテンツを配置して中央揃えにすることができます。
ブロック要素に.uk-containerクラスを追加して最大幅を設定し、Webサイトのメインコンテンツを囲みます。要素は中央揃えになり、側面にパディングが追加されます。パディングは、大きな画面に合わせて自動的に調整されます。
注意 ネストされたコンテナのパディングは、不要なスペースを避けるために削除されます。
<div class="uk-container"></div>コンテナに以下のクラスのいずれかを追加して、異なる最大幅を適用します。
| クラス | 説明 |
|---|---|
.uk-container-xsmall |
超小型コンテナにするには、このクラスを追加します。 |
.uk-container-small |
小型コンテナにするには、このクラスを追加します。 |
.uk-container-large |
大型コンテナにするには、このクラスを追加します。 |
.uk-container-xlarge |
特大型コンテナにするには、このクラスを追加します。 |
.uk-container-expand |
コンテナの幅を制限したくないが、動的な水平パディングを維持したい場合は、このクラスを追加します。 |
<div class="uk-container uk-container-xsmall"></div>
<div class="uk-container uk-container-small"></div>
<div class="uk-container uk-container-large"></div>
<div class="uk-container uk-container-xlarge"></div>
<div class="uk-container uk-container-expand"></div>セクションコンポーネントのセクション内のコンテンツの幅を変更するには、このコンポーネントを適用できます。
<div class="uk-section uk-section-primary">
<div class="uk-container uk-container-small"></div>
</div>