【bootstrap】classにcard-img-topを付与しても、画像が上部に配置されない

前提・実現したいこと

以下のように、カード内の画像を上部に位置させたい。

①bootstrap公式

<div class="card" style="width: 18rem;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

②個人ブログ

<div class="card my-3" style="width: 18rem">
    <img src="images/img1.jpg" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p>ここに写真の説明などを記載します。これは例えば作品集の一部を写真で示しておいて、下のリンクから作品集ページに飛んでもらうような仕掛けを作ることができます。</p>
        <a class="btn btn-primary" href="#">Details</a>
    </div>
</div>

ソースコードは【Bootstrap】Cardの使い方4パターンを紹介を参照

発生している問題・エラーメッセージ

しかし、私の方で再現をすると左横に設置されてしまう。

rb
1// index.html.erb
2<div class="container">
3  <div class="row">
4    <div class="content"><%= render @contents %></div>
5  </div>
6</div>

rb
1// _content.html.erb
2<div class="card" >
3  <img class="card-img-top" src="<%= content.media.url if content.media? %>" alt="Card image cap">
4  <div class="card-body">
5    <h3 class="card-title"><%= link_to content.title, "#" %></h3>
6    <p class="card-text">概要だよ！恐らく一覧には必要ないけどとりあえず入れてる</p>
7    <a href="#" class="btn btn-primary">詳細を見る</a>
8  </div>
9</div>
10

Contentテーブルは以下のようになっており、mediaに画像のパスを代入している。画像のアップロードなどにはCarrierWaveを使用している

Content
title	string
media	string

試したこと

画像サイズを拡大縮小したりした
→変化なし

上部だけが問題なのであって、imgタグの行をclass="card-body"の塊の次に配置すれば下部に表示されるのではないか
→右横に画像が配置されるため、ソースコードの位置の問題ではない

補足情報（FW/ツールのバージョンなど）

rails-5.2.3
ruby-2.6.3
bootstrap-3.4.1

Bootstrap公式カード
 【Bootstrap】Cardの使い方4パターンを紹介

Lhankor_Mhy

2020/10/01 03:18

ご提示のコードを試してみましたが、問題が再現しませんでした。ご提示いただいていない部分のコードに原因があるのかもしれません。

zyno

2020/10/05 16:16

divの位置が間違っていたようです。 <div class="card my-3 col-xs-3" > <div class="card-img-top bd-placeholder-img" > <%= image_tag content.media.url,:size => "260x180" %> <div class="card-body"> <h3 class="card-title"><%= link_to content.title, content %></h3> <p class="card-text">概要だよ！恐らく一覧には必要ないけどとりあえず入れてる</p> <a href="#" class="btn btn-primary">詳細を見る</a> </div> </div> </div> にしたら想定通りの動きになりました。

行動規範の内容に同意します

回答1件

自己解決

divの位置が間違っていたようです。

<div class="card my-3 col-xs-3" >
  <div class="card-img-top bd-placeholder-img" >
    <%= image_tag content.media.url,:size => "260x180" %>
    <div class="card-body">
      <h3 class="card-title"><%= link_to content.title, content %></h3>
      <p class="card-text">概要だよ！恐らく一覧には必要ないけどとりあえず入れてる</p>
      <a href="#" class="btn btn-primary">詳細を見る</a>
    </div>
  </div>
</div>

にしたら想定通りの動きになりました。

投稿2020/10/05 16:17

zyno

総合スコア41