simple_form 'form-inline' не работает

Question

Я пытаюсь сделать два ввода (имя и фамилия) рядом друг с другом.

Вот мой код, и в настоящее время он показывает только две большие строки окна ввода.

= simple_form_for @user, html: {class: 'form-inline'} do |f| 
    = f.fields_for :profile, @user.profile || Profile.new, html: {class: 'form-inline'} do |p| 
    .form-1 
     .form-1-detail 
      .input-text 
       = f.input :last_name, required: true 
      .input-text 
       = f.input :first_name, required: true 

Я теперь уверен, как заставить их отображать встроенные. Может кто-нибудь мне помочь?

Спасибо!

Обновлено. Это фактический HTML генерировать от

= simple_form_for @user, html: {class: 'form-inline'} do |f| 
= f.fields_for :profile, @user.profile || Profile.new do |p| # removed form-inline here 
    .form-1 
    .form-1-detail 
     .form-group 
     = f.input :last_name, required: true 
     .form-group 
     = f.input :first_name, required: true 




</div><form class="simple_form form-inline" novalidate="novalidate" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="DhQSodBk8kxdE6q9uPJDKSs9FfxCNLyXFYT3bZ42HlZfHefxfG3BDq9qkFpxkX7MBZI4Mc4Wje6LKw7Gp1YcjQ==" /> 
    <div class="form-1"> 
    <div class="form-1-detail"> 
     <div class="form-group"> 
     <div class="input string required user_last_name"><label class="string required" for="user_last_name"><abbr title="required">*</abbr> 姓</label><input class="string required" placeholder="姓" type="text" name="user[last_name]" id="user_last_name" /></div> 
     </div> 
     <div class="form-group"> 
     <div class="input string required user_first_name"><label class="string required" for="user_first_name"><abbr title="required">*</abbr> 名</label><input class="string required" placeholder="名" type="text" name="user[first_name]" id="user_first_name" /></div> 
     </div> 
    </div> 
    </div></form> 

Answer 1

simple_form камень использует Bootstrap, верно? Я сравнил ваш код с Bootstrap Form docs, и я думаю, вы должны использовать классы form-group внутри form-inline.

= simple_form_for @user, html: {class: 'form-inline'} do |f| 
    = f.fields_for :profile, @user.profile || Profile.new do |p| # removed form-inline here 
    .form-1 
     .form-1-detail 
     .form-group 
      = f.input :last_name, required: true 
     .form-group 
      = f.input :first_name, required: true 

С другой стороны, если у вас есть уникальный CSS, что вам нужно подать заявку на form-1 и form-1-detail классов, это могло бы быть в состоянии быть сокращен до:

= simple_form_for @user, html: {class: 'form-inline'} do |f| 
    = f.fields_for :profile, @user.profile || Profile.new do |p| # removed form-inline here 
    .form-group 
     = f.input :last_name, required: true 
    .form-group 
     = f.input :first_name, required: true 

Если это не работает, может вы публикуете фактический HTML-код, созданный для формы в браузере?

Answer 2

Вы должны установить simple_form оберток:

rails generate simple_form:install --bootstrap 

Оттуда вы можете структурировать inline_form используя это соответствующий обертку:

simple_form_for @user, wrapper: :inline_form, html: { class: 'form-inline' } ... 

Они есть пример приложения: https://github.com/rafaelfranca/simple_form-bootstrap

Конкретная что, используя это (извините, однако, это ERB):

https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/examples/_inline_form_sf.html.erb

Answer 3

Попробуйте использовать f.input_field вместо f.input.

Справка: https://github.com/plataformatec/simple_form#stripping-away-all-wrapper-divs