rails bootstrap gridシステムの基本


### rails bootstrap gridシステムの基本


```html:基本的な書き方
<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
--------------------------------------------------------->
```

```html: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の合計が多い場合は下にずれる
--------------------------------------------------------->
```

```html: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の合計が少ない場合は下にあった要素が空いているスペースにくるので注意
--------------------------------------------------------->
```

```html: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で前の要素を指定した分ふさぐ
--------------------------------------------------------->
```


```html: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|


```html: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 ++|
--------------------------------------------------------->
```




[https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf](https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf)