[rails,bootstrap]フォロー,フォローを外す 2つのボタンの位置がずれる

Question

フォローボタンとフォローを外すボタンをおしたとき、それぞれの位置が画像のようにずれてしまいます。
まさかバックエンド側とは思えないのでとりあえずビューファイルだけ載せときます。

ご指摘お願いできればと思います。

<index.html.erb>

<div class="container">
    <div class="row">
      <% @communities.each do |community| %>
         <div class="col">
            <%= link_to community_path(community) do %>
               <div class="card" style="width: 14rem;">
                  <div class="card-image">
                    <%= attachment_image_tag community, :intro_image, fallback:"no-image.jpg", class:"rounded-top" %>
                  </div>

                  <div class="card-body">
                    <%= community.title %>
                    <%= community.introduction%>
                  </div>

                  <% if current_user.present? && current_user.following?(community) %>
                    <%= link_to  community_follows_path(community.id), method: :delete, remote: true do %>
　　　　　　　　　　　　　<button type="button" class="btn btn-primary btn-sm">フォローを外す</button>
                    <%end%>
                  <% else %>
                    <%= link_to  community_follows_path(community.id), method: :post, remote: true do %>
                    <button type="button" class="btn btn-outline-primary btn-sm">フォロー</button>
                    <%end%>
                  <%end%>
                  <%= community.follows.count %>
               </div>
            <%end%>
          </div>         　
       <%end%>
    </div>
</div>

    <style>
      .intro_image {
        width: 222px;
        height: 180px;

      }



      .row {
         padding-top: 30px;
      }

      .card {
        height:330px;

      }

    </style>

Comments

[no1knows]

> 画像のようにずれてしまいます
どこがずれているのでしょうか？

[YutoKubo]

フォローボタンを押すと青いフォローを外すボタンに切り替わるのですが、同じ位置で切り替わるのではなく、一段ずれた位置にボタンが出現してしまいます。画像のようにボタンが横一列に並んでいない状態です。

Answer 1

全体的にコードを修正しました。h5やsmallなどは適宜調整してください。
またマウスオーバーの時に挙動が変になるのは、<a>タグの中に<a>タグを入れているためかもしれません。
Bootstrapはあまり詳しくないのですいません。。。

---

こういうフレームワークを利用して短時間で期待通りのコードを書く方法として下記のようなやり方があります。

①期待するデザインになるようなソースを見つける。公式が望ましい。
→今回は、BootstrapのサンプルページのAlbumを利用

②微調整を行う。今回は横４つのカード表示なのでcol-md-4をcol-md-3に変更。

③画像や文字列などのコードを置き換える。

---

上記方法を利用すると下記のような形になりますがいかがでしょうか？
あとは<%= link_to community_path(community) do %>〜<%end%>をどのようにするか検討する必要があります。

<div class="row">
  <% @communities.each do |community| %>
    <div class="col-md-3">
      <div class="card mb-4 shadow-sm">
        <%= attachment_image_tag community, :intro_image, fallback:"no-image.jpg", class:"card-img-top" %>
         <div class="card-body">
           <h5 class="card-title"><%= community.title %></h5>
           <p class="card-text"><%= community.introduction%></p>
           <div class="d-flex justify-content-between align-items-center">

            <% if current_user.present? && current_user.following?(community) %>
              <%= link_to  community_follows_path(community.id), method: :delete, remote: true do %>
                <button type="button" class="btn btn-primary btn-sm">フォローを外す</button>
              <%end%>
            <% else %>
              <%= link_to  community_follows_path(community.id), method: :post, remote: true do %>
                <button type="button" class="btn btn-outline-primary btn-sm">フォロー</button>
              <%end%>
            <%end%>
            <small class="text-muted"><%= community.follows.count %></small>
          </div>
        </div>
      </div>
    </div>
  <%end%>
</div>

---

公式をみるとcard-bodyクラスにリンクなども含んでいるので、下記のようにやってみたらどうなりますか？

<div class="card" style="width: 14rem;">
  <div class="card-image">
    <%= attachment_image_tag community, :intro_image, fallback:"no-image.jpg", class:"rounded-top" %>
  </div>

  <div class="card-body">
    <%= community.title %>
    <%= community.introduction%>
-  </div>

  <% if current_user.present? && current_user.following?(community) %>
    <%= link_to  community_follows_path(community.id), method: :delete, remote: true do %>
      <button type="button" class="btn btn-primary btn-sm">フォローを外す</button>
    <%end%>
  <% else %>
    <%= link_to  community_follows_path(community.id), method: :post, remote: true do %>
      <button type="button" class="btn btn-outline-primary btn-sm">フォロー</button>
    <%end%>
  <%end%>
  <%= community.follows.count %>
+  </div>
</div>

Comments

[YutoKubo]

ごしてきいただいた通りコードを修正しました。
立て続けにはなるのですが、カーソルをボタンではなくボタン周辺に合わせると、更新させていただいた画像のように、横二重線が現れ,その部分もボタンになってしまっています。

[YutoKubo]

ありがとうございます！スタイリングに関しては手探り状態だったので大変助かります。
問題の箇所は直りました。ひとつだけ、幅の調整が欲しかったので<div class="card mb-4 shadow-sm" style="width: 14rem;">としました。
もうひとつわがままを聞いていただけると嬉しいのですが、画像下段の'もじこう'と書かれてるcardの文字がはみだしちゃっている箇所はどうしたらいいですか？(質問力がなくてすいません...。)

[YutoKubo]

空の投稿ができないようにvalidatesを設定し、card内に収まるように投稿ページに文字数制限をかけるのが無難かもしれないですね。ありがとうございます。

[YutoKubo]

たびたび失礼します、link_toはどこに挿入したらよいでしょうか？cardの前に挿入するとカードが横３つになり横4つ並べられなくなっちゃいます。

[no1knows]

> 画像下段の'もじこう'と書かれてるcardの文字がはみだしちゃっている箇所はどうしたらいいですか？
この原因は、cardの高さを指定しているからです。
なので、ある程度文字数を制限する形が好ましいかと思います。
<h5 class="card-title"><%= community.title[0,6] %></h5>
<p class="card-text"><%= community.introduction[0,30] %></p>
https://www.javadrive.jp/ruby/string_class/index5.html

あとはcard-groupを使って高さを自動調整する形でも良いかと思います。

> link_toはどこに挿入したらよいでしょうか？
これはそのままcardをlink_toでまとめてしまうとフォローボタンがきちんと動かなくなる可能性が高いです。
そのためどういった仕様にするかによって大きく変わってくると思います。
また横3つになるようであればaタグにスタイル（padding-rightかmargin-rightなど）が当たっている可能性があるので、このカード内だけキャンセルすると良いかと思います。
https://saruwakakun.com/html-css/basic/chrome-dev-tool

[YutoKubo]

ありがとうございます！