devなどのclassにkk-container
を指定してください。
size-*
の属性を合わせて指定することでコンテナサイズを指定できます。
基本は中央揃えですが、left
属性を指定することで左寄せにできます。
下記サンプルで、ウィンドウ幅を変えながらサイズ指定の挙動をご確認いただけます。
<div class="kk-container kk-margin-top" size-ss>
<div class="kk-box-dashed kk-align-center kk-bg-color-attention">
size-ss (max-width: 480px)
</div>
</div>
<div class="kk-container kk-margin-top" size-s>
<div class="kk-box-dashed kk-align-center kk-bg-color-attention">
size-s (max-width: 720px)
</div>
</div>
<div class="kk-container kk-margin-top">
<div class="kk-box-dashed kk-align-center kk-bg-color-attention">
default (max-width:1200px)
</div>
</div>
<div class="kk-container kk-margin-top" size-l>
<div class="kk-box-dashed kk-align-center kk-bg-color-attention">
size-l (max-width:1600px)
</div>
</div>
<div class="kk-container kk-margin-top" size-ss left>
<div class="kk-box-dashed kk-align-center kk-bg-color-attention">
left
</div>
</div>
size-ss (max-width: 480px)
size-s (max-width: 720px)
default (max-width:1200px)
size-l (max-width:1600px)