개요

Rails의 form_for을 사용하는 부분에서 양식을 가로로 정렬하는 데 조금 빠져서 공유하겠습니다.

환경

루비 2.6.3 레일 5.1.6 부트 스트랩 4.4.1

방법

bootstrap의 그리드 시스템(row와 col-(숫자))을 사용한다.
폼을 div.row로 둘러싸고, 옆으로 하고 싶은 요소를 div.col-로 둘러싼다.
(상기 약간 오해를 주는 표현입니다만, 하기 주의점을 참조해 주세요)

주의점

form_for 메소드의 외부가 아니라 내부에 div.row를 배치합니다.

구체적인 방법 (OK 패턴)

home.html.erb

<%= form_for(:session, url: login_path) do |f| %>        
  <div class="row">
    <div class="col-2">
      <div class="form-group">            
        <%= f.label :email %>
        <%= f.email_field :email, class: 'form-control' %>          
      </div>
    </div>
    <div class="col-2">
      <div class="form-group">            
        <%= f.label :password %>
        <%= f.password_field :password, class: 'form-control' %>
      </div>  
    </div>
    <div class="col-2 align-self-end">
      <div class="form-group">        
        <%= f.submit "ログイン", class: 'btn btn-primary' %>
      </div>
    </div>
  </div>
<% end %>

쓸데없는 패턴

home.html.erb

<div class="row">
  <%= form_for(:session, url: login_path) do |f| %>        
    <div class="col-2">
      <div class="form-group">            
        <%= f.label :email %>
        <%= f.email_field :email, class: 'form-control' %>          
      </div>
    </div>
    <div class="col-2">
      <div class="form-group">            
        <%= f.label :password %>
        <%= f.password_field :password, class: 'form-control' %>
      </div>  
    </div>
    <div class="col-2 align-self-end">
      <div class="form-group">        
        <%= f.submit "ログイン", class: 'btn btn-primary' %>
      </div>
    </div>  
  <% end %>
</div>

이상입니다.

기타

Qiita에 제대로 한(제대로 하고 있습니까!?) 투고를 하는 것이 처음이었습니다.
지적이 있으면 꼭 부탁드리겠습니다.