colの合計が12未満の時

Question

bootstrap3を勉強中の者です。

写真を横並びに
・タブレットサイズ以上の場合は、５枚ずつ
・タブレットサイズ未満の場合は、３枚ずつ
表示しようと思いました。

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-xs-4">写真１</div>
    <div class="col-sm-2 col-xs-4">写真２</div>
    <div class="col-sm-2 col-xs-4">写真３</div>
    <div class="col-sm-2 col-xs-4">写真４</div>
    <div class="col-sm-2 col-xs-4">写真５</div>
  </div>
</div>

この時col合計が12未満のため、PC画面で見ると下のように右側が空白で余ってしまいました。

右側の余白なく綺麗に表示する場合、通常どうするのでしょうか？

初心者ですが2通りほど方法を考えてみました。

方法１．
containerか、rowか、上位要素に対して中央寄せを設定する

方法２．
具体的な方法は分からないですが、画面幅を5分割したサイズを各col幅に設定する

初心者につき勘違いあるかもしれません。
先輩方アドバイス宜しくお願いします。

Comments

[m.ts10806]

>bootstrap3を勉強中

もう5も出ているので今さら3を勉強するメリットはないのでは？
4との互換性もそこまでではなかったようには思います。それなりに書きかえが発生したような。
どういった前提や背景なのでしょうか。

[pecchan]

開発環境のrailsが古く、それに合わせてです。

[pecchan]

bootstrapを4に上げれそうなので上げてみます。
ありがとうございました。

[m.ts10806]

念のため
4にあげたら解決というわけではないです。グリッドレイアウトの問題なので同じくついてくる課題です。
Bootstrapはフロントエンドのフレームワークなのでバックエンドの新旧は依存しないと思います。

Answer 1

こんにちは。

Bootstrap 4 に変更する、という前提で回答します。
flex-fill を使うといいのでは。

Fill | Flex · Bootstrap

Comments

[pecchan]

有難う御座います。
まさに探してたものでした。
バージョンを上げます。