rails3，simple_form，twitter bootstrap：单选按钮闯入differnet行

我的rails 3.1.3 app使用的是simple_form 2.0.1和twitter_bootstrap_rails 2.0.3。rails3，simple_form，twitter bootstrap：单选按钮闯入differnet行

我所有的表单元素看起来不错，除了当我使用无线电集合

= 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，并且所有的o其他表单元素看起来不错。

我需要一个附加到f.collection_radio_buttons的特殊类吗？

来源

2012-03-10 jpwynn

您是否熟悉Firebug或Chrome的开发工具？你的问题可能是在CSS中。某些元素可能是'display：block'而不是'display：inline'。 – nicholaides 2012-03-10 04:06:29

试试这个

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

来源

2012-03-30 15:31:37 mogadget

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

f.association：列，如：radio_buttons

的collection_radio_buttons是一个自定义字段发电机，因此需要写（在初始状态）的包装来处理正确输出

来源

2012-03-20 17:41:47 user1155014

这完全不适合我。我只是用CSS做的。我在按钮和标签周围用class =“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基金会。 ;）

来源

2013-09-28 08:41:44

rails3，simple_form，twitter bootstrap：单选按钮闯入differnet行

回答

相关问题