質問編集履歴

1

質問を変更いたしました。

2020/12/03 10:25

投稿

YutoKubo
YutoKubo

スコア13

test CHANGED
@@ -1 +1 @@
1
- rails一覧ページをbootstrapスタイリング
1
+ [rails]erbにbootstrapスタイリングが適応されない
test CHANGED
@@ -1,61 +1,41 @@
1
- railsにて一覧ページをbootstrapで以下ようにスタイリングしようとしているのでがうまくいきません
1
+ bootstrapのcardコンポーネントを使用して画像のスタイルを整えようとしていす。
2
2
 
3
+ cardのスタイリングが適応されていればcardにキャプション画像がきれいに収まるはずですが、現在下の画像のようにはみ出てしまっている状態です。
4
+
3
- フレームワークに限らず、良スタイリング方法があればご教授頂ける嬉しす。
5
+ 何かご指摘ただければとす。
4
6
 
5
7
 
6
8
 
9
+ 参考: [https://getbootstrap.com/docs/4.5/components/card/](https://getbootstrap.com/docs/4.5/components/card/)
10
+
7
- ![![イメージ説明](8ec3a93ea819c6911cbd136bb92ddaf3.png)]
11
+ ![イメージ説明](59b84fa2fc09fdf615fe742173c4f846.png)
12
+
13
+ ```ここに言語を入力
14
+
15
+ <% @communities.each do |community| %>
16
+
17
+ <%= link_to community_path(community) do %>
18
+
19
+ <div class="card" style="width: 15rem;">
20
+
21
+ <div class="card-image">
22
+
23
+ <%= attachment_image_tag community, :intro_image, fallback:"no-image.jpg"; %>
24
+
25
+ </div>
8
26
 
9
27
 
10
28
 
11
- 参考記事:[https://getbootstrap.com/docs/4.5/components/card](https://getbootstrap.com/docs/4.5/components/card)
29
+ <div class="card-body">
12
30
 
13
-
14
-
15
-
16
-
17
-
18
-
19
- <index.html.erb>
20
-
21
- ```ここに言語を入力
22
-
23
-
24
-
25
- <div class="index">
26
-
27
- <%= @communities.each do |community| %>
31
+ <%= community.title %>
28
-
29
- <%= link_to community_path(community) do %>
30
-
31
-
32
-
33
- <div class="card" style="width: 15rem; height:370px;">
34
-
35
-
36
-
37
- <%= attachment_image_tag community, :intro_image, fallback: "no-image-icon_person.jpg", class: "intro_image" %>
38
-
39
-
40
-
41
- <div class="card-body">
42
-
43
- <h5 class="card-title"> <%= community.title %> </h5>
44
-
45
- <p class="card-text"> <%= community.user.username %></p>
46
-
47
- </div>
48
32
 
49
33
  </div>
50
34
 
51
-  
35
+ </div>
52
36
 
53
- <% end %>
37
+ <%end%>  
54
38
 
55
- <%end%>
39
+ <%end%>
56
-
57
- </div>
58
-
59
-
60
40
 
61
41
  ```