Question

我的rails 3.1.3 app正在使用simple_form 2.0.1和twitter_bootstrap_rails 2.0.3。

我的所有表单元素看起来都很好，除非我使用收音机

= f.collection_radio_buttons :my_fieldname, [['x1', 'FOO'],
['x2', 'BAR'],
['x3', 'FOOBAR'],
['', 'None']], :first, :last

单选按钮和标签垂直显示如下：

()
FOO
()
BAR
()
FOOBAR
()
None

而不是像这样：

() FOO () BAR () FOOBAR () None

我将“form-horizontal”类分配给simple_form_for，所有其他表单元素看起来都很好。

我是否需要附加到f.collection_radio_buttons的特殊类？

Answer 1

试试这个

<%= f.input :save_it, :collection => [['Yes',true] ,['No', false]], :as => :radio_buttons, :item_wrapper_class => 'inline', :label => 'Save now?' %>

Answer 2

如果你的模型有一个关联，它内置于simple_form以跟随该关联并生成适当的嵌套字段。

f.association：column，as :: radio_buttons

collection_radio_buttons是一个自定义字段生成器，因此需要一个包装器（在初始化器下）来正确处理输出

Answer 3

这对我来说根本不起作用。我刚刚用CSS做了。我在按钮和标签周围打了一个div =“radio-buttons”的div。然后我把它添加到我的样式表（SASS）：

.radio-buttons {
  margin: .5em 0;
  span input {
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  }
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string { 
    margin-bottom: .5em !important;
  }

  clear: both;
}

.form-block {
  clear: both;
  margin-top: .5em;
}

 .radio-buttons span {
  clear: both;
  display:block;
 }

这将使所有框架上的单选按钮内联，但这被调整为Zurb Foundation的最佳选择。 ;）

rails 3，simple_form，twitter bootstrap：单选按钮分为不同的行

3 个答案: