在 Rails 应用程序中使用带有 simple_form 的 twitter bootstrap 时，如何对下拉菜单进行样式化？

Question

我正在使用 simple_form 和 twitter-bootstrap-rails gems。每件事都运行良好，但不知何故，下拉菜单并没有被 twitter bootstrap rails 风格化..它像正常形式一样显示。

<%= f.input :category, :collection => ["one", "two", "three", "four"],
    :input_html => {:class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>

显示下拉菜单的图片：

需要像在引导程序中一样的下拉图像

Answer 1

使用SimpleForm 和Bootstrap 获得风格化下拉菜单的一种方法是使用Bootstrap-Select。它有一个Rails Gem；添加到您的 Gemfile 并执行 bundle:

gem 'bootstrap-select-rails'

你需要把它添加到你的样式表中

@import "bootstrap-select";

和Javascript。

//= require bootstrap-select

现在，您只需在现有的f.input 中使用input_html: {class: 'selectpicker'}：

<%= f.input :category, :collection => ["one", "two", "three", "four"],
:input_html => {:class => 'selectpicker'}, :label => 'Send To', prompt: "Choose From List" %>

然后初始化 Javascript（无论你有多少选择器，都是一次性的）：

<%= javascript_tag "$('.selectpicker').selectpicker();" %>

重新启动您的应用，您的输入下拉菜单应使用 Bootstrap 样式呈现。

一些可能有用的额外信息：您可以通过将disabled 类添加到项目来禁用提示项目，以便无法从下拉列表中选择它。我找不到关于 SimpleForm 如何将样式应用于集合的一个元素的任何指导，但我想出了以下所有此类提示：

<%= javascript_tag "$('li[data-original-index=0]').addClass('disabled');" %>

Answer 2

替换

<%= f.input :category, :collection => ["one", "two", "three", "four"],:input_html => { :class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>

有

<%= f.input :category, :collection => ["one", "two", "three", "four"],:input_html => { :class => 'form-control'}, :label => 'Send To', prompt: "Choose From List" %>

.form-control 用于设置选择标签的样式。所有带有.form-control 的文本<input>, <textarea>, and <select> 元素都设置为宽度：100%；默认情况下。将标签和控件包裹在 .form-group 中以获得最佳间距。

dropdown 不用于select 标签。查看详情here