Question

我尝试使用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>

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>标记，然后像这样添加引导类

<%= 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选择标记。这样做就可以完成这项工作：

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

rails上的Bootstrap与date_field形成帮助问题并选择

2 个答案: