rails/bootstrap/overlayにて文字を写真下部に綺麗に揃えたいのですが揃いません

Question

bootstrapのcardにoverlayにて文字を写真下部に綺麗に揃えたいのですが揃いません。(写真のようになってしまします)

シャネルの文字を写真下部に、下揃えし、かつ幅も写真に合わせるにはどうしたら良いのでしょうか。

    <div class="card">
        <div class ="wwrapper">
        <%= link_to image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %>
        <div class="card-img-overlay">
          <h4 class="card-title brandtitle">シャネル</h4>
        </div>
      </div>
        <div class="card-block">
          <p class="card-text">test</p>
          <a href="#" class="btn btn-primary">test</a>
        </div>
      </div>

.card {
   max-width: 15rem;
 }
.card-img-top {
   width: 100%;
 }
.wwrapper{
  position: relative;
}
.brandtitle{
  background-color:rgba(0, 0, 0, 0.5);
  color: $white;
  position: absolute;
  bottom: 0rem;
  width: 100%;}

Comments

[退会済みユーザー]

"Card"ということは、Bootstrapはv4.0.0でしょうか？

[innjera]

コメント有難う御座います。v4.0.0です。情報欠けており失礼致しました。

Answer 1

イメージされているのは、こんな感じでしょうか？

• card-img-overlayクラスのdiv要素にclass="brandimage"付加

<div class="card-img-overlay brandimage">
  <h4 class="card-title brandtitle">シャネル</h4>
</div>

• CSSに以下を追加

.brandimage {
	padding: 0;
}
.brandtitle {
	margin-bottom: 0;
}

Comments

[innjera]

綺麗に揃いました。大変有難う御座いました。marginとpaddingの理解を再度復習します。

[退会済みユーザー]

今回の修正でおこなったのは、BootstrapのCSSにあるプロパティの上書きです。
クラスとCSSを付加することで、以下のプロパティを上書きしています。

.card-img-overlay { padding:1.25rem; }
.card-title { margin-bottom: .75rem; }

ブラウザの開発者ツールなどで、要素を選択してみると、
marginやpaddingがどこで付加されているのかがわかるので、是非確認してみてください。

[innjera]

なるほど。ご丁寧に有難う御座います！