railsで、each.do をしたものを一列に表示したい

前提・実現したいこと

現在Ruby on Rails 6 と Bootstrap5 で簡易Webアプリを作成しています。ユーザーが成績を入力すると、各ユーザー毎に横一列に成績が表示されるというものを作りたくて、each.do で表示したいのですが、ここで表示したものが次の画像のように横一列に表示されずに縦に並んでしまいます。

以下がerbコードです

<%= render 'layouts/flash_messages' %>
<div class="center jumbotron">
    <h1>Welcome to the Sample App</h1>

    <h2>
        This is the home page for the
        <a href="heeps://railstutorial.jp/">Ruby on Rails Tutorial</a>>
        sample application.
    </h2>
</div>

<div class="center">
<% @grades.each do |grade|  %>
    <div class="container">
        <div class="row">
            <p class="col-sm" >name | <%= user_name_is? grade %></p>
            <p class="col-sm" >A+ | <%= grade.AA %></p>
            <p class="col-sm" >A  | <%= grade.A %></p>
            <p class="col-sm" >B  | <%= grade.B %></p>
            <p class="col-sm" >C  | <%= grade.C %></p>
            <p class="col-sm" >D  | <%= grade.D %></p>
            <p class="col-sm" >F  | <%= grade.F %></p>
            <p class="col-sm" >GPA  | <%= grade.GPA %></p>
        </div>
    </div>
<% end %>
</div>

application.html.erbの主要部

  <body>
    <div class="container">
      <div class="container-fluid py-4 <%= devise_controller? ? 'mw-md' : 'mw-xl'%>">
        <%= yield %>
      </div>
  </body>

理想とされるものは、
name| 8 A+| 9 A| 1 B| 2 C| 3 D| 4 F| 5 GPA| 2.37
name| 7
のようなもので、これを中央に配置したいです。

試したこと

https://getbootstrap.jp/docs/5.0/layout/grid/
このドキュメントを参考に、col-smクラスを付与したり、全てにcol-1クラスを付与したりと色々試しましたができませんでした。

補足情報（FW/ツールのバージョンなど）

Rails 6.1.4.1
MacOS BigSur 11.2.3

mather

2021/08/25 08:58

Bootstrap 5 では Jumbotron が廃止されているのですが、使っているのは Bootstrap のどのバージョンですか？ https://getbootstrap.jp/docs/5.0/migration/#jumbotron%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%9C%E3%83%88%E3%83%AD%E3%83%B3

tam1006

2021/08/25 09:10

すみません、 bootstrap-sass 3.4.1 bootstrap-will_paginate 1.0.0 を利用していました。

mather

2021/08/25 09:24 編集

使用しているライブラリのバージョンは質問の「補足情報」に追記しましょう。ちなみに、bootstrap-sass は2019年から保守されていないようなので、できれば別の新しいものを使うと良いと思います。 https://github.com/twbs/bootstrap-rubygem など。

mather

2021/08/25 09:33

ライブラリのバージョンが異なることがわかったので、質問の前提が変わってしまったと思います。 bootstrap-sass 3.4.1 のままで質問したいのか、Bootstrap 5 を正しく導入した上で改めて質問したいかを考えてください。どちらにせよ、今一度手元でドキュメントと実装を見直し動作確認を行った上で、質問を修正してください。

tam1006

2021/08/25 11:27

Bootstrap を正しく導入すれば正しく動作しました。ありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a
私が導入していたのは
bootstrap-sass 3.4.1
bootstrap-will_paginate 1.0.0
であり、Bootstrap 5 を正しく導入できていませんでした。
これを参考に正しく導入することでうまく動作できました。

投稿2021/08/25 11:29

tam1006

総合スコア28