【CSS・Bootstrap】カードを縦だけでなく横に3列程度表示したい

Question

したいこと

Bootstrapを使って横にもカードを表示させ、最終的には縦5×横4でカードを表示したいです。

現状の画像

その他
Rubyonrailsを使ってアプリを作成しています。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="gymbox">
        <div class="gymtitle">
          <%= link_to (gym.name), gym_path(gym) %>
        </div>
        <div class="delete">
          <% if current_user?(gym.user) %>
          <%= link_to "削除", gym, method: :delete,
          data: { confirm: "削除しますか？" } %>
          <% end %>
        </div>
        <div class="gympicture">
          <% gym.picture.each do |picture| %>
          <%= image_tag picture.url  %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

.gymbox {
  width: 500px;
  height: 400px;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  padding : 20px;
  box-shadow: 0 2px 5px #ccc;
  margin : 10px;
}

.gymtitle {
  font-size: 30px;
  margin-bottom: 10px;
  color: #333;
}

.delete{
  font-size: 14px;
  line-height: 1.5;
}

Answer 1

.col-md-3の中に.gymboxを並べるように記述しているなら間違いです。

<!-- 縦一列になってしまう失敗 -->
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="gymbox">...</div>
      <div class="gymbox">...</div>
      <div class="gymbox">...</div>
      <div class="gymbox">...</div>
    </div>
  </div>
</div>

以下のように、「.col-md-3」はカードの数だけ必要です。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="gymbox">...</div>
    </div>
    <div class="col-md-3">
      <div class="gymbox">...</div>
    </div>
    <div class="col-md-3">
      <div class="gymbox">...</div>
    </div>
    <div class="col-md-3">
      <div class="gymbox">...</div>
    </div>
  </div>
</div>

Comments

[NEMOTOSHOTA]

gymboxの数が変数になっておりまして、完成目標としてはgymboxの数を決めることができないようになっています。

[new1ro]

> gymboxの数が変数になっておりまして、完成目標としてはgymboxの数を決めることができないようになっています。
そのことと、<div class="col-md-3">のなかに<div class="gymbox">がたくさんあるHTML構造を避けることは両立すると思います。

<div class="col-md-3">を、ループ (など) の中に加えるようにしてください。
もしくはCSSの修正が必要ですが<div class="gymbox col-md-3">する、という方法も考えられはします。

とにかく認識していただきたいことは、
.col-md-3のなかに.gymboxがたくさんあるつくりだと、横並びは実装できないということです。

[NEMOTOSHOTA]

なるほど、わかりました。
<div class="col-md-3">をループの中に加えるように工夫してみます。ありがとうございます。

Answer 2

横に3列程度表示したい

最終的には縦5×横4でカードを表示したい

３列にしたいのか、４列にしたいのか、どちらでしょうか。

Bootstrapの設定を活かしたいのなら、CSSで幅を固定している部分は削除しましょう。

.gymbox {
/*  width: 500px;  ここを削除 */
  height: 400px;
  text-align: center;
  ・・・

そのうえで、
３列表示なら現状のままで。
４列表示なら、class="col-md-4"をclass="col-md-3"に変更するだけでなると思います。

Comments

[NEMOTOSHOTA]

回答ありがとうございます。
正しくは横に 4列にしたいです。
指摘されたCSSの部分を消したのですが、ボックスの幅が狭まっただけで4列になりませんでした。

[hatena19]

こちらで作成したサンプルでは４列になりますけど。

https://codepen.io/hatena19/pen/RwPOLME

[NEMOTOSHOTA]

本当ですね、、画像があるのが原因かもしれないです。画像をリサイズした状態にして調べてみます。

[hatena19]

CSSに
.gympicture img {
width: 100%;
}
を追加してみてください。
画像サイズのそのままでもいけると思います。
↓サンプルに大きめの画像を追加してみました。

https://codepen.io/hatena19/pen/RwPOLME

[NEMOTOSHOTA]

ありがとうございます。
下記を追加しましたが、やはり一列に表示されてしまうようです。
.gympicture img {
width: 100%;
}

[hatena19]

上記の修正に加えて、new1roさんの回答のHTMLの修正してください。私のサンプルのHTMLもそのようになってます。