如何修改和设置简单形式的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