rails bootstrap gridシステムの基本
基本的な書き方
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
<!--イメージ----------------------------------------------
r ________________________ ____________
o | col-md-8 | col-md-4 |
w |________________________|____________|
# 横(col)の合計は12
--------------------------------------------------------->
colの合計が12より多い場合
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-6">col-md-6</div>
</div>
<!--イメージ----------------------------------------------
________________________
r | col-md-8 |
o |________________________|
w | col-md-6 |
|__________________|
# colの合計が多い場合は下にずれる
--------------------------------------------------------->
colの合計が12より少ない場合
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<!--イメージ----------------------------------------------
r ____________ ____________ _ _ _ _ _ _
o | col-md-4 | col-md-4 | |
w |____________|____________|_ _ _ _ _ _ |
# colの合計が少ない場合は下にあった要素が空いているスペースにくるので注意
--------------------------------------------------------->
offsetについて
<div class="row">
<div class="col-md-offset-2 col-md-6">col-md-offset-2 col-md-6</div>
</div>
<!--イメージ----------------------------------------------
r ______ __________________ _ _ _ _ _ _
o |/ / / | col-md-6 | |
w |_/_/_/|__________________|_ _ _ _ _ _ |
# offsetで前の要素を指定した分ふさぐ
--------------------------------------------------------->
xs_sm_md_lgについて
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
</div>
<!--イメージ----------------------------------------------
r __________________ __________________ __________________
o | col-xs-4 | col-xs-4 | col-xs-4 |
w |__________________|__________________|__________________|
|+++++++++++++++++++++++++ 画面幅:lg +++++++++++++++++++++++++|
↓
r _______________ _______________ _______________
o | col-xs-4 | col-xs-4 | col-xs-4 |
w |_______________|_______ _______|_______________|
|++++++++++++++++++++ 画面幅:md ++++++++++++++++++++|
↓
r ____________ ____________ ____________
o | col-xs-4 | col-xs-4 | col-xs-4 |
w |____________|____________|____________|
|++++++++++++++++ 画面幅:sm ++++++++++++++++|
↓
r _________ _________ _________
o | col-xs-4| col-xs-4| col-xs-4|
w |_________|_________|_________|
|+++++++++++ 画面幅:xs +++++++++++|
--------------------------------------------------------->
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<!--イメージ----------------------------------------------
r __________________ __________________ __________________
o | col-sm-4 | col-sm-4 | col-sm-4 |
w |__________________|__________________|__________________|
|+++++++++++++++++++++++++ 画面幅:lg +++++++++++++++++++++++++|
↓
r _______________ _______________ _______________
o | col-sm-4 | col-sm-4 | col-sm-4 |
w |_______________|_______ _______|_______________|
|++++++++++++++++++++ 画面幅:md ++++++++++++++++++++|
↓
r ____________ ____________ ____________
o | col-sm-4 | col-sm-4 | col-sm-4 |
w |____________|____________|____________|
|++++++++++++++++ 画面幅:sm ++++++++++++++++|
↓
_________
| col-sm-4|
r |_________|
o | col-sm-4|
w |_________|
| col-sm-4|
|_________|
|+++++++++++ 画面幅:xs +++++++++++|
--------------------------------------------------------->
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<!--イメージ----------------------------------------------
r __________________ __________________ __________________
o | col-md-4 | col-md-4 | col-md-4 |
w |__________________|__________________|__________________|
|+++++++++++++++++++++++++ 画面幅:lg +++++++++++++++++++++++++|
↓
r _______________ _______________ _______________
o | col-md-4 | col-md-4 | col-md-4 |
w |_______________|_______ _______|_______________|
|++++++++++++++++++++ 画面幅:md ++++++++++++++++++++|
↓
____________
| col-md-4 |
r |____________|
o | col-md-4 |
w |____________|
| col-md-4 |
|____________|
|++++++++++++++++ 画面幅:sm ++++++++++++++++|
↓
_________
| col-md-4|
r |_________|
o | col-md-4|
w |_________|
| col-md-4|
|_________|
|+++++++++++ 画面幅:xs +++++++++++|
--------------------------------------------------------->
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
<!--イメージ----------------------------------------------
r __________________ __________________ __________________
o | col-lg-4 | col-lg-4 | col-lg-4 |
w |__________________|__________________|__________________|
|+++++++++++++++++++++++++ 画面幅:lg +++++++++++++++++++++++++|
↓
_______________
| col-lg-4 |
r |_______________|
o | col-lg-4 |
w |_______________|
| col-lg-4 |
|_______________|
|++++++++++++++++++++ 画面幅:md ++++++++++++++++++++|
↓
____________
| col-lg-4 |
r |____________|
o | col-lg-4 |
w |____________|
| col-lg-4 |
|____________|
|++++++++++++++++ 画面幅:sm ++++++++++++++++|
↓
_________
| col-lg-4|
r |_________|
o | col-lg-4|
w |_________|
| col-lg-4|
|_________|
|+++++++++++ 画面幅:xs +++++++++++|
--------------------------------------------------------->
| xs | < | sm | < | md | < | lg |
|---|---|---|---|---|---|---|
| スマホ | 767px | タブレット | 991px | PC | 1119px | PC |
xs_sm_md_lg複数指定
<div class="row">
<div class="col-md-3 col-sm-6">col-md-3 col-sm-6</div>
<div class="col-md-3 col-sm-6">col-md-3 col-sm-6</div>
<div class="col-md-3 col-sm-6">col-md-3 col-sm-6</div>
<div class="col-md-3 col-sm-6">col-md-3 col-sm-6</div>
</div>
<!--イメージ----------------------------------------------
r _____________ _____________ _____________ _____________
o | col-md-3 | col-md-3 | col-md-3 | col-md-3 |
w |_____________|_____________|_____________|_____________|
|+++++++++++++++++++++++++ 画面幅:lg +++++++++++++++++++++++++|
↓
r _________ _________ _________ _________
o | col-md-3| col-md-3| col-md-3| col-md-3|
w |_________|_________|_________|_________|
|+++++++++++++++++ 画面幅:md +++++++++++++++++|
↓
________ ________
r |col-sm-6|col-sm-6|
o |________|________|
w |col-sm-6|col-sm-6|
|________|________|
|++++++ 画面幅:sm ++++++|
↓
________
|col-sm-6|
|________|
r |col-sm-6|
o |________|
w |col-sm-6|
|________|
|col-sm-6|
|________|
|++ 画面幅:xs ++|
--------------------------------------------------------->