如何修改和设置简单形式的f.input标记

Question

我有一个表单，我要求用户在特定的选项集合之间进行选择。 我的代码库中的表单如下所示：

= f.label :recognition, "How did you hear about us?", required: false, class: "font required-field"

= f.input :recognition, input_html: { class: "recognitionStyling" }, collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, required: false

现在确定这是有效的，但我想要这样做一点，并且有问题这样做。

我现在拥有的是这样的：

然而，我想要获得的是类似于此的东西：

是否有特定的输入需要允许这种情况发生？ 我尝试的是在我的输入上添加一个名为recognitionStyling的类，它看起来如下，但我不知道CSS是否是进行此修改的方法。

.recognitionStyling{
  width: 100%;
}

Answer 1

您可以将标签合并到输入中，并在input_html添加占位符：

= f.input :recognition, 
          input_html: { class: "recognitionStyling" }, 
          prompt: "-- SELECT ONE --", 
          collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, 
          label: "How did you hear about us?", 
          required: true

Answer 2

你可以下载bootstrap。 然后，您必须将.js和.css添加到您的资产中。 对于添加的所有文件，将它们包含在application.js或application.css文件的顶部，如下所示（所以没有它们的扩展名）。

在assets / javascript / application.js中：

//= require_bootstrap.min

在assets / stylesheets / application.css.scss中

 *= require_bootstrap.min    

在views / item / show.html.erb中：

<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form role="form">
<div class="form-group">
  <label for="sel1">Select list (select one):</label>
  <%= f.select :recognition, input_html: { class: "form-control" }, collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, required: false %>
</div>

点击此链接http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp