Question

你能帮我格式化这个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 %>

我想将布尔值显示为两列复选框，每列垂直堆叠，每列有4个复选框。

类似

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

我已经在这里克隆了git存储库http://simple-form-bootstrap.plataformatec.com.br/articles/new，查看了代码，运行它，我发现它有效。
但是......它适用于存储在字符串中的一系列复选框选项。我有一个包含8个布尔值的模型，无法理解如何使用rails，css，twitter-bootstrap和simple_form在表单中正确分组它们。

我读过这篇帖子：Make all input fields on the same line
......而这一个：Adding controls inline with simple_form, nested_form and Twitter Bootstrap in Rails

......但它们似乎不适合我的特殊情况而且我没有想法尝试。

请尝试将您的答案集中在一个特定的代码示例上，该示例演示如何以某种分组方式布局各个布尔值的复选框。

提前致谢！

Answer 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类调整所需的列。

使用css，twitter-bootstrap和simple_form对各个布尔值的复选框进行分组

1 个答案: