time_select 创建的 <select> 丢失 class="form-control"

Question

<select> 在 Bootstrap 3.3.7 中的样式可以这样完成：

<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

关键是classform-control。当我在 html.eex 中使用 Phoenix.HTML.Form 中的 time_select 创建 <select> 时， 甚至没有添加 class 当我指定它时：

<div class="form-group">
    <%= label f, :break, "Pause", class: "control-label" %>
    <%= time_select f, :break, class: "form-control" %>
</div>

结果 HTML 如下所示：

<div class="form-group">
    <label class="control-label" for="training_break">Pause</label>
    <select id="training_break_hour" name="training[break][hour]">
        <option value="0">00</option>
        ...

如何将classform-control添加到<select>这里？

我注意到其他类型的输入确实添加了 class，例如text_input:

<div class="form-group">
    <%= label f, :title, "Titel", class: "control-label" %>
    <%= text_input f, :title, class: "form-control" %>
</div>

结果是：

<div class="form-group">
    <label class="control-label" for="training_title">Titel</label>
    <input class="form-control" id="training_title" name="training[title]" type="text">
</div>

我发现的另一件事是 post: . It states the same problem, sadly there is no such HTML-specific parameter for Phoenix' version 那个函数。

也许我只是错过了什么？

Answer 1

当您使用仅生成一个 <select> 的函数时（例如 select），您可以像这样添加 class：

<%= select f, :age, class: "form-control" %>

当您使用生成多个 <select> 的函数（例如 date_select）时，添加您需要的 class像这样分别解决每个问题：

<%= date_select f, :date,
    [
        year: [class: "form-control"],
        month: [class: "form-control"],
        day: [class: "form-control"]
    ] %>

这会将 class form-control 添加到所有三个生成的 <select> 中。

time_select 创建的 <select> 丢失 class="form-control"

<select> created by time_select is missing class="form-control"

twitter-bootstrap-3

phoenix-framework