使用css，twitter-bootstrap和simple_form为单个布尔值分组复选框 [英] Grouping checkboxes for individual boolean values using css, twitter-bootstrap, and simple_form

问题描述

您能帮我格式化这个simple_form吗？

我使用这个表单：

 <％= simple_form_for @my_model，：html => {：class => 'form-horizo​​ntal'} 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％> 
  

我想将布尔值显示为两列复选框，

 某些文字：[input ] 
描述：[input] 
 bool1 bool5 
 bool2 bool6 
 bool3 bool7 
 bool4 bool8 
  

我已经克隆了git存储库 http://simple-form-b​​ootstrap.plataformatec.com.br/articles/new ，看看代码，运行它，我看到它的工作。

但是。 ..它适用于一系列的复选框选项存储在字符串。我有一个具有8个布尔值的模型，不能理解如何使用rails，css，twitter-bootstrap和simple_form在表单中正确地对它们进行分组。

ve阅读此SO post：使所有输入字段在同一行< a>

... and this one：使用Rails中的simple_form，nested_form和Twitter Bootstrap添加控件

...但他们似乎

请尝试将您的答案集中在一个特定的代码示例，显示如何布置单个布尔值的复选框在某种分组的方式。

提前感谢！

解决方案

我通过使用正常的网格控件过去创建了多列引导表单。在您的情况下，像：

 < 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 类。

Can you please help me format this simple_form?

I am using this 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 %>

I'd like to display the boolean values as two columns of checkboxes, each vertically stacked with 4 checkboxes in each column.

something like

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

I've cloned the git repository here http://simple-form-bootstrap.plataformatec.com.br/articles/new, looked at the code, ran it, and I see it works.
But... it works for a series of checkbox options that get stored in a string. I have a model with 8 boolean values and can't understand how to properly group them in a form using rails, css, twitter-bootstrap, and simple_form.

I've read this SO post: Make all input fields on the same line
... and this one: Adding controls inline with simple_form, nested_form and Twitter Bootstrap in Rails

... but they don't seem to fit my particular situation and I am out of ideas to try.

Please try to focus your answer on a specific code example that shows how to layout checkboxes for individual boolean values in some sort of a grouped fashion.

Thanks in advance!

解决方案

I've made multi column bootstrap forms in the past by just using the normal grid controls. In your case, something like:

<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>

Then you can tweak those columns however you want by using the different span and offset classes.

这篇关于使用css，twitter-bootstrap和simple_form为单个布尔值分组复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！