在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' }  %>