グリッドシステム-積み重ねて水平に

単純なレイアウトの単純なグリッドの例を見てみましょう-2列、列ごとに2つの段落。（ここでは、各列のスタイルが使用されます。避けることができます。）

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

   <div class = "row">

      <div class = "col-md-6"  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-md-6" 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>

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

詳細

<div class = "container"> … </div> 要素が追加され、レイアウトの適切なセンタリングと最大幅が確保されます。 コンテナが追加されたら、次に行の観点から考える必要があります。 <div class = "row"> … </div> および列 *<div class = "col-md-6"> </div> を行内に追加します。
グリッドのすべての行は12単位で構成されており、それらの単位を使用して列の目的のサイズを定義できます。この例では、それぞれ6単位の幅、つまり6 + 6 = 12で構成される2つの列があります。

次のようなオプションを試すことができます- <div class = "col-md-3"> </div> および <div class = "col-md-9"> </div> または <div class = "col-md-7"> </div> および <div class = "col-md-5"> </div>

実験して、合計が常に12である必要があることを確認してください。

Bootstrap-grid-system-example1

グリッドシステム-積み重ねて水平に