イオングリッド（グリッド）

イオングリッド（グリッド）および他のほとんどのフレームワークは、弾性ボックスモデル（フレキシブルボックスモデル）を使用して、異なっています。 そして、携帯端末で、基本的に電話がサポートされています。 行のスタイル指定された行、列のスタイル指定された列。

同じサイズのグリッド

あなたはCOLが含まれている場合スタイルで、スタイルの要素を持つ行では、列は同じサイズに設定されます。

次の例の行のスタイルは5コルスタイル、20％の各COL幅が含まれています。

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

»をお試しください

列の幅を指定します。

あなたは、行の各列のサンプルサイズを設定することができます。 デフォルトでは、カラムが同じサイズに分割されます。 しかし、あなたはまた、カラム（行動12メッシュ）の幅の割合として設定することができます。

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

»をお試しください

注：各スタイルの例には、自動的にコル境界線と灰色の背景に追加されます。

以下に記載されている指定された列幅のパーセンテージスタイル名の一部です：

そこオフセットグリッド

あなたは、左の列には、次のような例は、オフセットを設定することができます。

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

»をお試しください

ここではいくつかの割合は、スタイル名をオフセットされています。

グリッドにポートレートスナップ

フレキシブルボックスモデルを簡単に縦方向に整列された列を設定することができます。 長手方向に整列上部、底の中央部を含む、それが列の各行、または指定された列に適用することができます。

たとえば、優れた縦位置合わせグリッドのデモコンテンツを設定し、最後の1。

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

»をお試しください

応答グリッド

例えばあなたがスイッチハンドヘルド画面、横画面、縦画面のように。 我々は、適応サイズの幅に応じて実施することができる行ごとにグリッドを設定する必要があります。

異なるデバイスクラスの応答スタイルを次のように

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

»をお試しください