スタイル整えるのホント難しい！！【Bootstrap】

こんにちは、マリンです。

無事一覧ページのサムネイルができました！

しかしまぁ、スタイル整えるのってホント難しいです！！

Bootstrap使っていい感じにできるとはいえ、

containerやらrowやらcolやら・・・

「だから！なんで左寄りになっちゃうわけ！！！」

と悪戦苦闘したのでメモっときます。

やりたかったこと

サムネイルを4つずつ横並びにしたい。

ハマったこと

ハマったというか・・・なんかどうやっても全体的に左寄りになってしまうんです。

class="container"にしてみたり、marginで調節してみたり、

でもダメでした・・・

必要だったこと

ズバリ！きちんとしたグリッドシステムの知識ですね。

まぁ、まだまだ奥は深いと思いますが・・・

で、こんな感じになりました。

<h1>index</h1>
<div class="container">
  <div class="row center">
      <% @works.each do |work| %>
        <div class="col-xs-6 col-sm-4 col-md-3">
          <div class="thumbnail">
            <p><%= link_to image_tag(work.image.thumb.url), work%></p>
            <p><%= link_to work.name, work %></p>
          </div>
        </div>
      <% end %>
  </div>
</div>

/* index */
.thumbnail {
  float: left;
  margin: 25px;
  width: 200px;
  height: 200px;
}

グリッドシステムについて

画面を格子状に分け、そのブロックごとに図面や文字を配置するレイアウトの手法です。

Bootstrapでのグリットシステムは、横幅を12分してコンテンツを配置します。

画面サイズに合わせてxs,sm,md,lgでそれぞれ指定しておけば、

いい具合にレスポンシブに対応してくれます。

構造としては、

<div class="container">
      <div class="row">
           <div class="col-md-4">columnA</div>
           <div class="col-md-4">columnB</div>
           <div class="col-md-4">columnC</div>
      </div>
</div>

こんな感じです。

中サイズの画面では、12分割した4つ分を使って1つのコンテンツを配置。

なので横に3つ並べる計算ですね。

詳しくはこちらをどうぞ。

bootstrap4.jp まだ完全には訳されていませんが・・・

注意点

Bootstrapのグリッドシステムでは、

デフォルトではmarginが0になっています。

もし何か微調整される方はそのことも考慮されると良いかと思います。

まとめ

Bootstrapはとってもとっても便利で格好いいですが、

やはり使用にはきちんとAPIとか読んだ方が良さそうですね。

構造とか、使うと固定されちゃうものとか、いろいろありそうなんで。

Bootstrap4のAPIはこちらです ＊日本語訳はまだ完全ではありません（汗）

Bootstrap3こちらは既に読みやすく訳されています。