Subscribed unsubscribe Subscribe Subscribe

@kyanny's blog

Write down what I learnt. Opinions are my own.

Twitter Bootstrap の Five Equal Columns というグリッドレイアウトについて

仕事のコードベースでテンプレートをマークアップしてたら .col-lg-2-5 というクラス名がでてきてオフィシャルドキュメントで探せなくてなんだろうと思ったら、 Five Equal Columns というグリッドレイアウトのテクニックというか考え方があるらしい。

5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five

Five equal columns in twitter bootstrap - Stack Overflow

五等分したいけどできないので Bootstrap 標準のクラス命名ルールを踏襲した上で自前で実装しよう、ということらしい。つまりなんらかのルールによって col-XX-1-5 みたいなクラス名フォーマットが決められてるわけではなく、単なる慣習みたいなもののようだ。

実際仕事のコードベースでは .col-lg-2-5 だけひっそり定義してあって他の類似のクラス名は一切定義されてなかった(だから .col-lg-2-4 とかちょっと変更すると Inspector で CSS 定義が出てこなくてへんだなと思ったのが調べるきっかけだった)