Простая форма - контроль ширины метки и ввода (с начальной загрузкой)

Чтобы установить класс для input и label, используйте input_html и label_html:

<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>

Что касается второго вопроса - если вы не используете подсказки, возможно, самое простое решение было бы сделать это так:

<%= f.input :pct_of_car , hint: "%",  :wrapper =>:horizontal_range %>

Затем вы можете стилизовать его, добавив пользовательский класс в подсказку с опцией hint_html (аналогично input_html и label_html). [1115 ]

Обновление

Лучшим решением для добавления пользовательского текста является использование блока для ввода:

<%= f.input(:role, :wrapper => :horizontal_range, label_html: {class: "col-md-8"}) do %>
  <div class='col-md-4'>
    <%= f.input(:role, components: [:input], :wrapper => false, label: false) %>
    <span>%</span>
  </div>
<% end %>

Благодаря этому у вашего ярлыка есть класс col-md-8, и ввод с вашим текст заключен в div с классом col-md-4.

Вам нужно определить свою собственную оболочку или изменить стандартные.

Во-первых, убедитесь, что в вашем репозитории есть упаковщики по умолчанию.

Запустите rails g simple_form:install --bootstrap, если не можете найти app/initializers/simple_form_bootstrap.rb.

Во-вторых, найдите классы сетки Bootstrap в этом инициализаторе. Для горизонтальной формы они находятся в блоке, который выглядит следующим образом:

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

В-третьих, измените упаковщик!

В этом фрагменте измените col-sm-9 на col-sm-8. Также измените col-sm-3 на col-sm-4.

Завершение

Сохранить. Перезагрузите сервер Rails. Теперь все формы будут иметь метки шириной 33% и 66% ширины.

Если вы не хотите применять это глобально, передайте опцию wrapper: :my_wrapper любому input и создайте новую пользовательскую оболочку, которая делает то, что вы хотели бы.

Должен любить SimpleForm!