Q&A
迅速なご回答、誠にありがとうございました。また参考サイトも共有いただき、ありがとうございました。class="col-md-4"に修正し、編集いたしましたが、
横３列にカラムが並ばない状況です。。
念のため現在の状況を追記いたしますので、恐れ入りますがご確認頂けますと幸いでございます。
何卒宜しくお願い致します。
Ruby on Rails を用いて、投稿ができるアプリを作成中です。
bootstrapを用いて、投稿一覧画面を実装しており、
ボックスを、均等に横列に３つ並べたいのですが、下にいくにつれて小さく表示されてしまっております。
何かアドバイスを頂けますと大変幸いです。
何卒宜しくお願い致します。
posts/index.html.erb
1 2 3 4 <div class="row"> 5 <% @posts.each do |post| %> 6 <div class="col-mb-3"> 7 8 <div class="card"> 9 <%#img class="card-img-top" src="images/notepc-wp.jpeg" alt="ライトコースのイメージ画像"%> 10 <div class="card-body text-center"> 11 <h4 class="card-title"><%=post.title %></h4> 12 <p class="card-text"><%=post.contents %></p> 13 <a href="#" class="btn btn-primary">詳細を見る</a> 14 </div> 15 </div> 16 </div> 17 <%end%>
posts.scssは作成しておりますが、現時点で一切コードは書いておりません。
※追記
posts/index.html.erb(col
1<%= search_form_for @search, url: posts_path do |f| %> 2<div class="form-group"> 3 <%= f.label :title_or_contents_cont, 'エージェントを検索しよう' %> 4 <%= f.search_field :title_or_contents_cont,class:"form-control"%> 5 </div> 6 <div class="actions"><%= f.submit '検索' %></div> 7<% end %> 8 9 10 11 12 <div class="container"> 13 <div class="row"> 14 <% @posts.each do |post| %> 15 <div class="col-md-4"> 16 17 <div class="card"> 18 19 <%#img class="card-img-top" src="images/notepc-wp.jpeg" alt="ライトコースのイメージ画像"%> 20 <div class="card-body text-center"> 21 <h4 class="card-title"><%=post.title %></h4> 22 <p class="card-text"><%=post.contents %></p> 23 <a href="#" class="btn btn-primary">詳細を見る</a> 24 </div> 25 </div> 26 </div> 27 </div> 28 </div> 29 30 <%end%> 31
回答2件
0
ベストアンサー
html
1<div class="container"> 2 <div class="row"> 3 <% @posts.each do |post| %> 4 <div class="col-md-4"> 5 <div class="card"> 6 <%#img class="card-img-top" src="images/notepc-wp.jpeg" alt="ライトコースのイメージ画像"%> 7 <div class="card-body text-center"> 8 <h4 class="card-title"><%=post.title %></h4> 9 <%# <p class="card-text"><%=post.contents %></p> %> 10 <a href="#" class="btn btn-primary">詳細を見る</a> 11 </div> 12 </div> 13 </div> 14 <%end%> 15 </div> 16</div>
このコードでどうでしょうか？
<%end>の位置がおかしいと思います。
投稿2020/04/22 06:29
総合スコア53
0
こんにちは！
以下のコードでどうでしょうか？
htmlerb
1<div class="col-md-4"> 2#省略 3</div>
Bootstrapのグリッドシステムは画面を12個に分割します。
よって3等分であれば12÷3=4となるので、md-4でいいかと思います。
ネットにも色々情報ありますが、良ければこのサイトとか参考にして下さい http://websae.net/twitter-bootstrap-grid-system-21060224/
投稿2020/04/21 17:14
総合スコア53
chiaki-kjwrさん
念のため..、もとのソースコードだと
「col-mb-3」です。「b」でなく「d」が正解です。
class="col-md-4"に修正したとのことですが、
「col-mb-4」になってしまっていませんか?
noriochan様、new1ro様
御丁寧にご返信ありがとうございました。
こちら、ご指摘のとおりcol-mb-4になっておりました。確認不足で失礼いたしました。
上記を修正してもまだ、横３列に並ばず、解決策を試行錯誤している状況です。。
念のため修正後のコードを追記させていただきました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/22 07:16