HTML
CSS
bootstrap
bootstrap4

Bootstrap - Grid systemをやってみる。

公式ドキュメント

Layout > Grid について見てみる
https://v4-alpha.getbootstrap.com/layout/grid/

<div class="col"> で1カラムを作れる。
colが1つで1/12を表す。 

Equal-width

まずは公式ドキュメント通りにやってみる

test.html
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

結果

これだけだと何が起きてるの変わらないので css に線を囲む

site.css
 .col {
  outline: 1px solid blue;
}

結果

test.html
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
<div>

結果(full screenになる)

Setting one column width

cssで線を見やすくするために

site.css
 .col , 
[class^=col] {
  outline: 1px solid blue;
}
test.html
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

結果

12カラムを越えるとどうなるのか?

rubyでループ処理で適当な単語をcol-1で繰り返してみる。

test.html.erb
<div class="container">
  <div class="row">
    <% (1..16).each do |x| %>
    <div class="col-1"><%= lorem.word %></div>
    <% end %>
  </div>
</div>

結果(12を超えた時点で折り返される)

カラムの中でさらに分けたい時

test.html.erb
<div class="container">
  <div class="row">
    <div class="col-3"><%= lorem.word %></div>
    <div class="col-9"><%= lorem.word %>
      <div class="row">
        <div class="col-3"><%= lorem.word %></div>
        <div class="col-9"><%= lorem.word %></div>
      </div>
    </div>
  </div>
</div>

結果