如何修改和設置簡單形式的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