みなさん初めまして。ソフトウェア開発部の丹です。
主にHTML/CSS/JS等を書いています。

Twitter Bootstrapで制作したサイトをスマートフォンで表示した際、通常グリッドは使えなくなるのですが、それを可能にする方法を紹介したいと思います。

そもそもTwitter Bootstrapって何?

Twitter謹製のCSSフレームワークです。
グリッドと呼ばれる横並びレイアウトが簡単に出来たり、よく見るボタンや機能が予め搭載されているCSSです。
最近はJavaScriptも追加され、折り畳みを始めとするよくある機能が簡単に使えます。

Twitter Bootstrap

さっそくグリッド対応させてみる

上記コードを保存したCSSをbootstrap-responsive.cssを読み込んだ後に読込むだけです。
追記してもいいです。

えもじっち bootstrapバージョン

簡単な解説

そもそも何故スマートフォンではグリッドが効かないのか。

bootstrapのオリジナルソースに書かれていません。 PC表示を前提としているので、バナーのように大きな画像を小さくするのは変になる可能性があると思ったのでは無いでしょうか。

mediaqueriesの767px

これはスマートフォン横向けした時まで対応する幅になります。
これ以上大きくすると、タブレットの縦向けの大きさになります。

レスポンシブ・ウェブデザイン・サイズ

width を 横幅一杯にする?

それぞれのプロパティで画面左右の余白を調整出来ます。
上記の場合だと、左右の余白を完全に取ります。

グリッド設定

[class^="row"]rowで始まるclassを指定し、その中の各.spanのwidthをそれぞれ設定しています。
リキッドレイアウトになりますが、スマートフォン向けの場合はリキッドの方が色々都合が良いですよ。

便利です

慣れたらとても便利なので、是非一度使ってみて下さい。