BootstrapのGridSystemと、imgタグに”img-responsive”クラスの組み合わせで、次のようなギャラリー風ページを、結構シンプルな方法で書けます。 先に完成例を見てみます。 ▼Largeサイズ(lg)の場合は6列表示 ▼Mediumサイズ(md)の場合は4列表示 ▼Smallサイズ(sm)の場合は3列表示 ▼Extra Smallサイズ(xs)は2列表示 GridSystemでは、「12 ÷ 表示したい列数」を指定します。 Largeサイズの時は6列表示 … 12 ÷ 6 = 2 … col-lg-2 Mediumサイズの時は4列表示 … 12 ÷ 4 = 3 … col-md-3 Smallサイズの時は3列表示 … 12 ÷ 3 = 4 … col-sm-4 Extra Smallサイズの時は2列表示 … 12 ÷ 2 = 6 … col-xs-6 という感じで
![Bootstrapの基本(3) – GridSystemを上手に使ってギャラリー風ページを作る方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab1a8aafc1e5c8313ba43f92348b517489f7558b/height=288;version=1;width=512/http%3A%2F%2Fwww.officebflat.jp%2Fblog%2Fimages%2F%2F2015%2F02%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588-2015-02-17-22.53.26.png)