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包装器：

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

从那里你可以使用它的相应包装器构建一个inline_form：

img {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

他们有一个示例应用：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 2

尝试使用f.input_field代替f.input。

参考：https://github.com/plataformatec/simple_form#stripping-away-all-wrapper-divs

Answer 3

simple_form gem使用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

或者，除非您需要申请form-1和form-1-detail类的唯一CSS，否则可能会缩短为：

= 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吗？

simple_form'form-inline'无效

3 个答案: