bootstrap 画像が表示されない

Question

投稿画像をレスポンシブ化されているとき、トップページに表示させたい

レスポンシブされていない際は、投稿画像が表示されますが
レスポンジブ化した際に、画像が消えてしまいます。
bootstrapを使用しています。

該当のソースコード

<% @posts.each do |post| %>
      <div class="card mb-3" style="max-width: 540px;">
        <div class="row no-gutters">
          <div class="col-md-8">
            <div class="card-body">
              <%= link_to post_path(post.id) do %>
              <h3 class="card-title text-body"><%= post.title %></h3>
              <p class="card-text"><small class="text-muted"><%=  l post.created_at %></small></p>
            </div>
          </div>
          <div class="col-md mx-3 mb-4">
          <% if post.image.attached? %>
          <div class="card-img-right flex-auto d-none d-lg-block mb-3  ">
            <%= image_tag post.image.variant(gravity: :center, resize:"450x300^", crop:"450x300+0+0").processed  %>
          </div>
          <%end%>
          </div>
        <%end%>
       </div>
      </div>
      <%end%>

試したこと

画像サイズを、

<%= image_tag post.image.variant(gravity: :center, resize:"450x300^", crop:"450x300+0+0").processed  %>

上記で指定しました。

全て、投稿画像を統一させる適切なコードの記述方法はございますでしょうか。
ご教授お願いいたします。

Answer 1

投稿画像をレスポンシブ化されているとき、トップページに表示させたい

d-noneを削除すると良いかと思います。
Bootstrap公式

Comments

[toratail]

d-none
削除しましたら、無事表示することができました。
本当にありがとうございます。

[no1knows]

それは良かったです！