simple_formフォームアイテムは改行なしで行に表示されますか？

Question

ラッパーやスタイルsimple_formを記述して、フォーム要素がすべて1行になるようにすることはできますか？

必要なのは、このようなものです：用

検索：[入力テキストフィールド]国[テキストフィールドをドロップダウン]都市[テキストフィールドをドロップダウン]

イム

• simple_form 2
を使用して
• twitterブートストラップ2

現在、 m-horizo​​ntalまたは.form-verticalを使用すると、CSSにルールを追加するか、simple_formラッパーを作成することで、 "inline 1 row form elements display"を取得する最良の方法はありますか？

更新いくつかのHAML/CSS：

= simple_form_for(@session, :html => { :class => 'form-horizontal' }) do |f| 


    = f.input :age_from, 
      :collection => 18..60, 
      :default => 18, 
      :blank =>false, 
      :label => 'Age from', 
      :item_wrapper_class => 'inline', 
      :input_html => { :style => "width: 102px" }, 


    = f.input :age_to, 
      :collection => 18..60, 
      :default => 25, 
      :blank => false, 
      :label => 'Age to', 
      :item_wrapper_class => 'inline', 
      :input_html => { :style => "width: 102px" } 

よりはまだ定期的にブートストラップCSSの何を使用していません。 item_wrapper_classは、コレクション内の単一のラジオボタンのように、要素全体に対して機能していません。

私はあなたが.FORM水平使用（私のための最も簡単かつクリーンな溶液）またはカスタム入力を書き込むことができますいずれか

Answer 1

（からの年齢と年齢）完全なコレクション要素をインラインでラップするための良い方法を必要としますか、カスタムフォームビルダー。ドキュメントをhttps://github.com/plataformatec/simple_formにチェックしてください。

Answer 2

最新のブートストラップには、フォームインラインクラスがあります。

= simple_form_for(@session, :html => { :class => 'form-inline' }) do |f| 

カスタムラッパーを作成することもできます。これは、ブートストラップのドキュメントからマークアップです：だから

<form class="form-inline" role="form"> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword2">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
    </div> 
    ... 
</form> 

、カスタムラッパー（のようなもの）を作成した場合：

SimpleForm.setup do |config| 
    config.wrappers :bootstrap, :tag => 'div', :class => 'form-group' do |b| 
    b.use :label 
    b.use :input 
    end 
end 

これはあなたが必要なものの大半を行う必要があります。私がまだ解決していない部分は、入力にフォームコントロールクラスを追加する方法です。

Answer 3

私は評判がないので上記の人にコメントを追加することはできませんが、上記のレベルのクラスを指定して入力を取得し、フォームコントロールを提供しているmixinを使用してくださいスタイルをフォームコントロールと同じにします。

.form-group input { 
    @include form-control-styling 
}