グリッドシステムで、横幅を端末に応じて変える(Bootstrap)

フロントエンド

今までcol-xs-offset-3 col-xs-6しか設定していなかったので、スマートフォンのような小さい画面でも横端にスキマをつくってしまい、見づらかった。

ここで、教訓にしていただきたいのが、ウェブアプリをつくっている際、Chromeの機能「デベロッパーツール」にてスマートフォン画面でも読みやすいか確認せよ、ということです。

ぼくはこれに気づかなくて、いまさらなおす羽目になりました・・・。

で、このようになおしてみると、

Image from Gyazo

 

992px

Image from Gyazo

 

991px

Image from Gyazo

これで、スマートフォンでも見やすくなりました!!