如何在 Rails 模型中使用 Bootstrap 表单选择 css？

Question

我想使用 Bootstrap css 在 Ruby on Rails 应用程序的表单中设置“选择”框的样式。

在 Bootstrap 网站上，他们以此为例：

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

但是，我无法弄清楚如何将此方法与我想要执行的选择区域的 ruby​​ on rails 代码相结合，以便它将所选选项保存到我的表中的正确列（此处为：ampm）中。 这是我目前拥有的代码。 它有效，但没有我想要的引导程序外观：

 <%= f.label :am_or_pm %> 
 <div class="form-control">
 <%= f.select(:ampm, options_for_select([['AM', 1], ['PM', 2]])) %>
 </div>

我尝试了多种方法将 Bootstrap 示例与我的代码集成，但没有任何效果。 任何帮助表示赞赏。

Answer 1

首先，要使 bootstrap 的form-control类起作用，您必须将其添加到select标签本身

每个apidoc of rails 表单选择

select(object, method, choices = nil, options = {}, html_options = {}, &block)

您可以将 html 类添加为

<%= f.select(:ampm, options_for_select([['AM', 1], ['PM', 2]]), {}, {class: "form-control"}) %>

或者干脆

<%= f.select :ampm, [['AM', 1], ['PM', 2]], {}, {class: "form-control"}) %>

Answer 2

这对我有用：

<%= f.select :secretquestion, options_for_select([
  ["Select One", ""], 
  "Your nick name", 
  "your schoool name", 
  "your love name", 
  "your comapnay name", 
  "your favourite website"]), 
  {}, { class: "form form-group form-control" } %>