Bootstrapのcardを元に一覧表示機能を実装
BootstrapのCardで一覧表示
フロント実装のフレームワークで重宝しているBootstrap5ですが、
Cardを使用して商品を横並びしたいと考えてました。
ところが、複数の商品を登録すると商品が縦に1列で並んでしまうので、
望んでいたデザインではありません。
このように縦型になってしまいます。
CSSを編集してみる
/* app/views/items/scss */ /* Cardの親要素 */ . container { display: flex; justify-content : space-between; }
これで横並びになるかなと思ったのですが、
更新しても1mmも変わってません。
新たな記述を加える
色々検索してみたら、どうやらrowクラスの
要素を入れたら横並びになるとのこと。
eachメソッドの前にrowクラスの
要素を追記しました。
横並びにはなりましたが、惜しい…
モザイクなので分かりませんが、
余白が全くなく隣接している状態です。
商品が増える毎に圧迫感があるページ表示になってしまいます。
そして画像の左右だけ中途半端に余白があり、
見栄えもよろしくありません。
更に記述を加えて組み合わせる
<!-- app/views/items/index.html.erb --> <div class="container"> <div class="row"> <% @items.each do |item| %> <div class="col-12 col-md-6 col-lg-4"> <div class="card" style="width: 18rem;"> /* 以下の記述略 */ </div> </div> <% end %> </div> </div>
新たにeachメソッドの後にcolクラスを追記しました。
グリッドと呼ばれるBootstrapが多く使用される理由の機能の一つなのですが、
この記述を加えることで求めていた通りの横並びとなりました。
まだまだ使用方法は模索中ですが、
一旦これにて問題は解決しました。
