Как отформатировать поле формы Rails с помощью CSS / Bootstrap?

Question

Я пробовал много исследовать и возиться, и я просто не могу заставить свое представление Rails отформатировать форму с помощью Bootstrap или CSS. Я знаю, что на него могут влиять классы Bootstrap или CSS.

То, что я пытаюсь сделать, это просто создать два столбца рядом с контейнером. С изображением в одном столбце рядом с формой в другом. Оба одинакового размера.

Я пробовал ожидаемое и исследовал: Контейнер с строкой с двумя столбцами. Один столбец используется в качестве формы, а второй столбец - в качестве изображения.

Вместо этого форма действует как плавная и занимает всю ширину страницы, а столбцы располагаются вертикально, а не бок о бок.

Я хочу, чтобы это выглядело так:

 <% = form_with (model: car, local: true) do | form | %> <% = hidden_field_tag ​​"car [login]", существует? "#{@car.login}": "#{@current_user.login}"%> <% = form.label: model, class: "h3"%> 
<% = form.text_field: model, id:: car_model, class: "form-control mb-2 mr-sm-2 mb-sm -0 "%>  <% = form.label: year, class: "h3"%> 
<% = form.number_field: year, id:: car_year, class: "form-control mb-2 mr-sm-2 mb-sm -0 "%>  <% = form.label: color, class: "h3"%> 
<% = form.text_field: color, id:: car_color, class: "form-control mb-2 mr-sm-2 mb-sm -0 "%>  <% = form.label: licence_plate, class: "h3"%> 
<% = form.text_field: licence_plate, id:: car_licence_plate, class: "form-control mb-2 mr-sm-2 mb-sm -0 "%>  <% = form.button "<h3> # {submit_text} ". html_safe, class: "btn btn-success btn-sm"%>  <% end%> # здесь источник img     

Answer 1

Обычно для форм bootstrap ваша метка и ввод должны быть заключены в элемент .form-group, а не .field.

https://getbootstrap.com/docs/4.0/components/forms/

Сделайте что-нибудь вроде:

<div class="form-group field">
  <%= form.label :licence_plate, class: "h3" %><br>
  <%= form.text_field :licence_plate, id: :car_licence_plate, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>