Bootstrap-grid-system-example3

グリッドシステム-モバイル、タブレット、デスクトップ

link：/bootstrap/bootstrap_grid_system_example2 [Medium and Large Device]の例を見てきました。 次に、別のレベルに移動します。ここでは、携帯電話のサイズをさらに小さくするために変更します。 タブレットの列を75％/25％に分割するオプションを追加したい場合、次のようにします-

<div class = "col-sm-3 col-md-6 col-lg-4">....</div>
<div class = "col-sm-9 col-md-6 col-lg-8">....</div>

これにより、各ポイントで3つの異なる列レイアウトが得られます。 電話では、左側が75％、右側が25％になります。 タブレットでは再び50％/50％になり、大きなビューポートでは33％/66％になります。 3つのレスポンシブサイズごとに3つの異なるレイアウト。 次の例で確認してください。 （ここでは、各列のスタイルが使用されます。 避けることができます。）

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">
      <div class = "col-sm-3 col-md-6 col-lg-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.</p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.</p>
      </div>

      <div class = "col-sm-9 col-md-6 col-lg-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>

         <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
            consectetur, adipisci velit, sed quia non numquam eius modi tempora
            incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
      </div>

   </div>
</div>

これは、次の結果を生成します-