前提・実現したいこと
ruby on rails で bootstrap5 を利用してフォームを作成しているのですが、次の画像のようにフォームが左寄りになってしまいます。
これを、フォームの箇所が中央に配置されるようにしたいです。
コードは次のものです。
html.erb
<div class="container"> <%= form_for @grade do |f| %> <%= render 'grades/error_messages', model: f.object %> <div class="row text-center justify-content-center"> <div class="col-sm-1"> <div class="form-group"> <%= f.label "A+" %> <%= f.number_field :AA, class: 'form-control' %> </div> </div> <div class="col-sm-1"> <div class="form-group"> <%= f.label "A" %> <%= f.number_field :A, class: 'form-control' %> </div> </div> <div class="col-sm-1"> <div class="form-group"> <%= f.label "B" %> <%= f.number_field :B, class: 'form-control' %> </div> </div> <div class="col-sm-1"> <div class="form-group"> <%= f.label "C" %> <%= f.number_field :C, class: 'form-control' %> </div> </div> <div class="col-sm-1"> <div class="form-group"> <%= f.label "D" %> <%= f.number_field :D, class: 'form-control' %> </div> </div> <div class="col-sm-1"> <div class="form-group"> <%= f.label "F" %> <%= f.number_field :F, class: 'form-control' %> </div> </div> </div> <div class="row"> <div class="col-sm-2"> <div class="form-group"> <%= f.submit "提出", class: 'btn btn-primary' %> </div> </div> </div> <% end %> </div>
補足情報(FW/ツールのバージョンなど)
Rails 6.1.4.1
MacOS BigSur 11.2.3
あなたの回答
tips
プレビュー