在date_field上的Bootstrap on rails form helper问题并选择

Question

我正在尝试使用bootstrap-4在表单中设置表单的样式。 但是我在将样式应用于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>

Answer 1

尝试以下

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

生成的HTML

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

对于select标记，您已经声明了两次，可以删除HTML <select>标记，然后添加如下所示的bootstrap类

<%= 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>

Answer 2

对于date_field请将类移到方括号内：

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

对于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' }  %>