【Rails】bootstrapのoffsetの使い方とグリッドの入れ子の見え方

2018年3月13日

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)を作ってみました。

<div class="form-horizontal" role="form">

  <div class="row" style="border:solid 1px #F00;"> #赤枠
  <div class="col-xs-offset-3 col-xs-6" style="border:solid 1px #333;"> #グレーの枠
    
  <%= form_for(@person) do |f| %>
    <div class="form-group">
      <div class="col-xs-4"  style="border:solid 1px #0F0;"> #緑色の枠
      	<%= f.label :age, '年齢', class:'control-label' %>
      </div>
      <div class='col-xs-8'  style="border:solid 1px #00F;"> #青色の枠
    	  <%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], {},   class: 'form-control' %>
      </div>
    </div>
  </div>
  </div>
</div>

グレーの枠のところで、offset-3を指定して左側に3カラムの空きを作りつつ、col-xs-6にて本体部分で6カラム確保、右側に3カラムの空きをつくって中央表示にしています。

その中に入れ子で年齢ラベル(4カラム)とセレクトボックスの入力欄(8カラム)を作っています。色を付けるとわかりますが、グレーの枠を相対的に12カラムとして、その中でラベル4と入力欄8を確保していることがわかりました。