如何使用 CSS/Bootstrap 格式化 Rails 表单字段？答案

【问题标题】：How format Rails form field with CSS/Bootstrap?如何使用 CSS/Bootstrap 格式化 Rails 表单字段？
【发布时间】：2020-10-29 13:28:29
【问题描述】：

我已经尝试了很多研究和修补，但我无法让我的 Rails 视图使用 Bootstrap 或 CSS 格式化表单。我知道 Bootstrap 类可能会影响它或 CSS。

我要做的只是创建一个两列并排的容器。在另一列中的表格旁边有一列中的图像。两者大小相同。

我已经尝试了预期和研究：具有两列行的容器。一栏作为表格，第二栏作为图片。

相反，表单表现得像是流动的，占据了整个页面宽度，并且列垂直堆叠，而不是并排。

我希望它看起来像这样：



<div class="container d-flex">
  <div class="row">
    <div class="col">
      
        <%= form_with(model: car, local: true) do |form| %>

          <%= hidden_field_tag "car[login]", exists ? "#{@car.login}" : "#{@current_user.login}"  %>

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

          <div class="field">
            <%= form.label :year, class: "h3" %><br>
            <%= form.number_field :year, id: :car_year, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
          </div>

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

          <div class="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>

          <div class="actions">
            <%= form.button "<h3>#{submit_text}</h3>".html_safe, class: "btn btn-success btn-sm" %>
          </div>

        <% end %>
        <div class="col">
           # img source here
        </div>

    </div>
  </div>
</div>

【问题讨论】：

标签： css ruby-on-rails bootstrap-4

【解决方案1】：

通常，对于引导表单，您的标签和输入应由 .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>

【讨论】：