Bootstrap on rails form helper issue with date_field and select答案

【问题标题】：Bootstrap on rails form helper issue with date_field and selectBootstrap on rails form helper issue with date_field and select
【发布时间】：2018-09-27 06:41:54
【问题描述】：

我正在尝试使用 bootstrap-4 在 Rails 中设置表单样式。但我在将样式应用于 date_field 帮助器和选择帮助器时遇到问题。

这是日期字段。在我将其关闭之前，该课程不会应用并引发错误。

<div class="form-group row">
    <%= form.label :appointment, :class => 'col-md-3 col-form-label text-md-right' %>
    <div class="col-md-9">
         <%= date_field(:patient, :apointment), :class => 'form-control' %>
    </div>
</div>

这是选择助手。选项显示在选择框之外。

<div class="form-group row">
              <%= form.label :consultationType, :class => "col-md-3 col-form-label text-md-right" %>
            <div class="col-md-9">
                <select class ="form-control">
                  <!--Gets all counties from DB -->
                  <%= form.select :consultationType, 
                [
                    "N/A",
                    "Inhouse-Clinic",
                    "St.James Hospital - X-Ray",
                    "Matter Private Dublin - Cardiology",
                    "Matter Private Cork - Neurology",
                    "Royal Eye and Ear - Ophthalmology",
                    "Temple Street - Children"
                ] 
            %>
                </select>

        </div>
      </div>

【问题讨论】：

尝试在括号内输入class：date_field(:patient, :appointment, class: 'form-control')

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

【解决方案1】：

对于date_field，将类移到括号内：

date_field(:patient, :appointment, class: 'form-control')

对于select，不需要显式地给出 HTML 选择标签。这样做就可以了：

<%= form.select :consultationType, ["N/A", "Inhouse-Clinic", "St.James Hospital - X-Ray", "Matter Private Dublin - Cardiology", "Matter Private Cork - Neurology", "Royal Eye and Ear - Ophthalmology", "Temple Street - Children"], {}, { class: 'form-control' }  %>

【讨论】：

【解决方案2】：

尝试以下方法

<%= date_field(:patient, :apointment, class: "form-control") %>

生成的 HTML

<input class="form-control" type="date" name="patient[apointment]" id="patient_apointment">

而对于select标签，你已经声明了两次，你可以去掉HTML的<select>标签，然后像这样添加引导类

<%= form.select :consultationType,
    [
        "N/A",
        "Inhouse-Clinic",
        "St.James Hospital - X-Ray",
        "Matter Private Dublin - Cardiology",
        "Matter Private Cork - Neurology",
        "Royal Eye and Ear - Ophthalmology",
        "Temple Street - Children"
    ], {}, {class: "form-control"} 
%>

这样生成的 HTML

<select class="form-control" name="patient[consultationType]" id="model_consultationType"><option value="N/A">N/A</option>
    <option value="Inhouse-Clinic">Inhouse-Clinic</option>
    <option value="St.James Hospital - X-Ray">St.James Hospital - X-Ray</option>
    <option value="Matter Private Dublin - Cardiology">Matter Private Dublin - Cardiology</option>
    <option value="Matter Private Cork - Neurology">Matter Private Cork - Neurology</option>
    <option value="Royal Eye and Ear - Ophthalmology">Royal Eye and Ear - Ophthalmology</option>
    <option value="Temple Street - Children">Temple Street - Children</option>
</select>

【讨论】：