Wie man einfachen Formulartextbereich anpaßt?

Question

Ich möchte in diesem Codeeingabebereiche

<%= simple_form_for @fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %> 
              <%= f.input :regular, label: "Regular" %> 
              <%= f.input :medium, label: "Medium"%> 
              <%= f.input :premium, label: "Premium" %> 
              <%= f.input :diesel, label: "Diesel" %> 

anpassen Styling wie das Bild haben, unter

Ich möchte nicht horizontol oder nichts. Ich will nur den Dollor vor mir haben.

Oder noch besser, so etwas wie unten aber mit $ statt @

Answer 1

können Sie finden Lösung here. Er verwendet Bootstrap und Simple

Answer 2

Sie haben Bootstrap CSS-Bibliothek in Ihre Anwendung hinzufügen und versuchen, den Code unten

simple_form_for @fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %> 
<div class="form-group"> 
    <div class="input-group"> 
    <div class="input-group-addon">$</div> 
    <%= f.text_field :regular, placeholder: "Regular", class:"form-control" %> 
    </div> 
    <div class="input-group"> 
    <div class="input-group-addon">$</div> 
    <%= f.text_field :medium, placeholder: "Medium", class:"form-control"%> 

    </div 
    <div class="input-group"> 
    <div class="input-group-addon">$</div> 
    <%= f.text_field :premium, placeholder: "Premium",class:"form-control" %> 

    </div 
    <div class="input-group"> 
    <div class="input-group-addon">$</div> 
    <%= f.text_field :diesel, placeholder: "Diesel",class:"form-control" %> 

    </div 
</div> 
<%end%>