Railsでプログラミングをしているなかでbootstrapを利用するととても画面を綺麗に見せられる事がわかってきました。
その中でoffsetで空白を開ける事ができるものの、線がついてないので見栄えがよくわからない、というのがあると思います。
またbootstrapでは横幅を12分割して12個のカラムとして、何カラム確保するかという書き方ができます。これをグリッドと言いますが、そのグリッドの指定を入れ子にしたらどうなるのか、も調査してみました。
bootstrapでoffsetの使い方と見え方
offsetを入れると、ラベルの前に数カラム開けることができる。
例えば以下のようにoffset-3とすると、横幅12カラムに対して3カラム分の空白ができる。その後に9マス分確保される。それぞれのdivタグにborderで色をつけてみた。
<div class=”col-xs-offset-3 col-xs-9″>
これが以下のように合計12じゃないとすると、空白3 中身6 空白3 になる。divタグに色をつけて初めて理解できました。
<div class=”col-xs-offset-3 col-xs-6″>
bootstrapでグリッドを入れ子にするとどう見えるか
下記のソースの col-xs-数字 のところがグリッド幅です。
グレーの枠のところで、中身にたいしてcol-xs-6で6カラムを確保しています。その中に入れ子で緑色の枠（col-xs-4）と青色の枠（col-xs-8）を作ってみました。
&lt;div class=&quot;form-horizontal&quot; role=&quot;form&quot;&gt;
&lt;div class=&quot;row&quot; style=&quot;border:solid 1px #F00;&quot;&gt; #赤枠
&lt;div class=&quot;col-xs-offset-3 col-xs-6&quot; style=&quot;border:solid 1px #333;&quot;&gt; #グレーの枠
&lt;%= form_for(@person) do |f| %&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col-xs-4&quot; style=&quot;border:solid 1px #0F0;&quot;&gt; #緑色の枠
&lt;%= f.label :age, '年齢', class:'control-label' %&gt;
&lt;/div&gt;
&lt;div class='col-xs-8' style=&quot;border:solid 1px #00F;&quot;&gt; #青色の枠
&lt;%= f.select :age, [&quot;20代&quot;, &quot;30代&quot;, &quot;40代&quot;, &quot;50代&quot;, &quot;60代&quot; ], {}, class: 'form-control' %&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
グレーの枠のところで、offset-3を指定して左側に3カラムの空きを作りつつ、col-xs-6にて本体部分で6カラム確保、右側に3カラムの空きをつくって中央表示にしています。
その中に入れ子で年齢ラベル（4カラム）とセレクトボックスの入力欄（8カラム）を作っています。色を付けるとわかりますが、グレーの枠を相対的に12カラムとして、その中でラベル4と入力欄8を確保していることがわかりました。
