Bootstrap3で5等分のレイアウトを作成する

Bootstrapは偶数での分割をする場合には使い勝手はいいのですが、奇数での分割をする場合はなかなかやりづらい部分があります。
特にwebサイトのコンテンツには5等分のレイアウトで作成されているもの（メニューとか）がよく出てくるので、使用頻度もそれなりかと思います。

私が5等分するにあたって、主に2通りの作成方法を採っています。

1. col-xx-offset-(n)を使用する

以下の方法です

ex.html

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
　　　　　　　　<div class="col-md-2"></div>
</div>

offsetを使用して左側にマージンを取る方法です。上記の例は左右に1カラム分のマージンをとりたい場合のものです。左右に2カラム分のマージンをとりたい場合はoffsetを2にします。

但し、左右にマージンを取る方法なので、例えば画面（要素）の左右の両端にピッタリくっつけて配置したいという要件に対しては別のやり方が必要です。

2. 5等分のオリジナルcolumnを作成する

そこで、5等分にするためのオリジナルcssを作成します。

ex.css

.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}   
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}

.col-xs-3-5 {
    width: 60%;
    float: left;
}

.col-xs-4-5 {
    width: 80%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
    .col-sm-2-5 {
        width: 40%;
        float: left;
    }
    .col-sm-3-5 {
        width: 60%;
        float: left;
    }
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
    .col-md-2-5 {
        width: 40%;
        float: left;
    }
    .col-md-3-5 {
        width: 60%;
        float: left;
    }
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
    .col-lg-2-5 {
        width: 40%;
        float: left;
    }
    .col-lg-3-5 {
        width: 60%;
        float: left;
    }
    .col-lg-4-5 {
        width: 80%;
        float: left;
    }
}   

上記cssを使うと、例えば以下のようになります。

ex.html

<div class="row">
<div class="col-md-2-5">...</div><!-- 全体の5分の2の要素をとる -->
<div class="col-md-3-5">...</div><!-- 全体の5分の3の要素をとる -->
</div>

上記のようにcol-xx-(n)-5と指定することで、５分割の内の何割をとるか、という指定が可能になります。

Sass版

Sass(scss)を使った定義は以下のようになります。
変数を考慮した5分割が可能になりますので、より汎用性が増します。

.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
  position: relative;
  min-height: 1px;
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}
@for $i from 1 through 4 {
  .col-xs-#{$i}-5 {
    float: left;
    width: percentage($i / 5);
  }
  @media (min-width: $screen-sm-min) {
    .col-sm-#{$i}-5 {
      float: left;
      width: percentage($i / 5);
    }
  }
  @media (min-width: $screen-md-min) {
    .col-md-#{$i}-5 {
      float: left;
      width: percentage($i / 5);
    }
  }
  @media (min-width: $screen-lg-min) {
    .col-lg-#{$i}-5 {
      float: left;
      width: percentage($i / 5);
    }
  }
}

参考

http://fellowtuts.com/twitter-bootstrap/5-equal-columns-bootstrap-grid-layout-with-1-2-3-4-of-five/
http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap