回答編集履歴
1
コード作り直し
answer
CHANGED
|
@@ -1,3 +1,55 @@
|
|
|
1
|
+
全体的にコードを修正しました。h5やsmallなどは適宜調整してください。
|
|
2
|
+
またマウスオーバーの時に挙動が変になるのは、<a>タグの中に<a>タグを入れているためかもしれません。
|
|
3
|
+
Bootstrapはあまり詳しくないのですいません。。。
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
こういうフレームワークを利用して短時間で期待通りのコードを書く方法として下記のようなやり方があります。
|
|
8
|
+
|
|
9
|
+
①期待するデザインになるようなソースを見つける。公式が望ましい。
|
|
10
|
+
→今回は、Bootstrapの[サンプルページ](https://getbootstrap.com/docs/4.2/examples/)のAlbumを利用
|
|
11
|
+
|
|
12
|
+
②微調整を行う。今回は横４つのカード表示なので`col-md-4`を`col-md-3`に変更。
|
|
13
|
+
|
|
14
|
+
③画像や文字列などのコードを置き換える。
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
上記方法を利用すると下記のような形になりますがいかがでしょうか？
|
|
19
|
+
あとは`<%= link_to community_path(community) do %>`〜`<%end%>`をどのようにするか検討する必要があります。
|
|
20
|
+
|
|
21
|
+
```ここに言語を入力
|
|
22
|
+
<div class="row">
|
|
23
|
+
<% @communities.each do |community| %>
|
|
24
|
+
<div class="col-md-3">
|
|
25
|
+
<div class="card mb-4 shadow-sm">
|
|
26
|
+
<%= attachment_image_tag community, :intro_image, fallback:"no-image.jpg", class:"card-img-top" %>
|
|
27
|
+
<div class="card-body">
|
|
28
|
+
<h5 class="card-title"><%= community.title %></h5>
|
|
29
|
+
<p class="card-text"><%= community.introduction%></p>
|
|
30
|
+
<div class="d-flex justify-content-between align-items-center">
|
|
31
|
+
|
|
32
|
+
<% if current_user.present? && current_user.following?(community) %>
|
|
33
|
+
<%= link_to community_follows_path(community.id), method: :delete, remote: true do %>
|
|
34
|
+
<button type="button" class="btn btn-primary btn-sm">フォローを外す</button>
|
|
35
|
+
<%end%>
|
|
36
|
+
<% else %>
|
|
37
|
+
<%= link_to community_follows_path(community.id), method: :post, remote: true do %>
|
|
38
|
+
<button type="button" class="btn btn-outline-primary btn-sm">フォロー</button>
|
|
39
|
+
<%end%>
|
|
40
|
+
<%end%>
|
|
41
|
+
<small class="text-muted"><%= community.follows.count %></small>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
<%end%>
|
|
47
|
+
</div>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
|
|
1
53
|
[公式](https://getbootstrap.jp/docs/4.2/components/card/)をみると`card-body`クラスにリンクなども含んでいるので、下記のようにやってみたらどうなりますか？
|
|
2
54
|
|
|
3
55
|
```Diff
|