0

この simple_form のフォーマットを手伝ってくれませんか?

私はこのフォームを使用しています：

<%= simple_form_for @my_model, :html => { :class => 'form-horizontal'} do |f| %>
<%= f.error_notification %>
    <div class="form-inputs">
      <%= f.input :some_text, :input_html => {:class => "span6", :rows => 2}%>
      <%= f.input :a_description, :input_html => {:class => "span6", :rows => 2}%>  
      <%= f.input :boolean1%>
      <%= f.input :boolean2%>
      <%= f.input :boolean3%>
      <%= f.input :boolean4%>
      <%= f.input :boolean5%>
      <%= f.input :boolean6%>
      <%= f.input :boolean7%>
      <%= f.input :boolean8%>
      <%= f.input :id, :as => :hidden, :input_html => { :value => @my_model.id }%>
  </div>
  <div class="form-actions">
    <%= f.button :submit, :class => 'btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                special_path, :class => 'btn' %>
  </div>
<% end %>

ブール値をチェックボックスの 2 つの列として表示したいと思います。各列には 4 つのチェックボックスが縦に積み上げられています。

何かのようなもの

Some text:      [input]
A description:  [input] 
                bool1    bool5
                bool2    bool6
                bool3    bool7
                bool4    bool8

ここで git リポジトリのクローンを作成しましたhttp: //simple-form-b​​ootstrap.plataformatec.com.br/articles/new 、コードを見て実行したところ、動作することがわかりました。
しかし...文字列に格納される一連のチェックボックスオプションに対して機能します。8 つのブール値を持つモデルがあり、レール、css、twitter-bootstrap、および simple_form を使用してフォームにそれらを適切にグループ化する方法がわかりません。

私はこの SO 投稿を読みました: Make all input fields on the same line
... そしてこれ: Adding controls inline with simple_form, nested_form and Twitter Bootstrap in Rails

...しかし、それらは私の特定の状況に合わないようで、試すアイデアがありません。

個々のブール値のチェックボックスを何らかのグループ化された方法でレイアウトする方法を示す特定のコード例に答えを集中してください。

前もって感謝します！

4

1 に答える 1

1

私は過去に、通常のグリッドコントロールを使用するだけで、複数列のブートストラップフォームを作成しました。あなたの場合、次のようなものです。

<div class="form-inputs">
  ...
  <div class="row">
    <div class="span6">
      <%= f.input :boolean1 %>
      <%= f.input :boolean2 %>
      ...
    </div>
    <div class="span6">
      <%= f.input :boolean5 %>
      <%= f.input :boolean6 %>
      ...
    </div>
  </div>
  ...
</div>

span次に、異なるクラスとクラスを使用して、これらの列を好きなように微調整できますoffset。

于 2012-10-23T23:21:16.523 に答える